From 7286613131beb1bc5e36439192ef5e566b2280c0 Mon Sep 17 00:00:00 2001
From: P SRIKAR NAIDU <nsrikar24@gmail.com>
Date: Fri, 30 Oct 2026 21:37:52 +0530
Subject: [PATCH 1/2] fix(editor): export local images without API URLs

---
 src/components/editor/EditorApp.tsx   |  4 ++--
 src/components/editor/ExportBar.tsx   | 32 ++++++++++++++++++++-------
 src/components/editor/export-utils.ts | 22 ++++++++++++++++++
 tests/components/export-utils.test.ts | 14 ++++++++++++
 4 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 src/components/editor/export-utils.ts
 create mode 100644 tests/components/export-utils.test.ts

diff --git a/src/components/editor/EditorApp.tsx b/src/components/editor/EditorApp.tsx
index 34df60a..4f5e61f 100644
--- a/src/components/editor/EditorApp.tsx
+++ b/src/components/editor/EditorApp.tsx
@@ -236,7 +236,7 @@ function EditorAppInner({ initialCategory }: EditorAppProps) {
           <span className="editor-topbar-name">{currentTemplate.name}</span>
         </div>
         <AITopbarButton />
-        <ExportBar apiUrl={apiUrl} downloadUrl={downloadUrl} params={state.params} templateId={state.templateId} />
+        <ExportBar apiUrl={apiUrl} downloadUrl={downloadUrl} params={state.params} templateId={state.templateId} svg={svg} />
       </div>
 
       {/* Mobile Tabs */}
@@ -278,7 +278,7 @@ function EditorAppInner({ initialCategory }: EditorAppProps) {
                 <Canvas svg={svg} loading={loading} error={error} />
               </div>
               {/* The topbar ExportBar always mounts and owns the shortcuts, so this second one opts out. */}
-              <ExportBar apiUrl={apiUrl} downloadUrl={downloadUrl} params={state.params} templateId={state.templateId} shortcuts={false} />
+              <ExportBar apiUrl={apiUrl} downloadUrl={downloadUrl} params={state.params} templateId={state.templateId} svg={svg} shortcuts={false} />
               <PlatformPreviewStrip
                 svg={svg}
                 title={String(state.params.title || '')}
diff --git a/src/components/editor/ExportBar.tsx b/src/components/editor/ExportBar.tsx
index ab7aa8d..580cc0e 100644
--- a/src/components/editor/ExportBar.tsx
+++ b/src/components/editor/ExportBar.tsx
@@ -1,11 +1,13 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { generateMetaTags } from '@/lib/meta-tag-generator';
+import { containsLocalImage, svgToPngBlob } from './export-utils';
 
 interface ExportBarProps {
   apiUrl: string;
   downloadUrl: string;
   params: Record<string, any>;
   templateId: string;
+  svg: string | null;
   /**
    * Whether this bar owns the keyboard shortcuts. Pass false on a second
    * ExportBar so Ctrl/Cmd+S and Ctrl/Cmd+Shift+C fire once, not once per bar.
@@ -24,22 +26,31 @@ export function ExportBar({
   downloadUrl,
   params,
   templateId,
+  svg,
   shortcuts = true,
 }: ExportBarProps) {
   const [downloading, setDownloading] = useState(false);
   const [copied, setCopied] = useState<string | null>(null);
   const downloadRef = useRef(downloadUrl);
   const apiUrlRef = useRef(apiUrl);
+  const svgRef = useRef(svg);
+  const hasLocalImage = containsLocalImage(params);
 
   downloadRef.current = downloadUrl;
   apiUrlRef.current = apiUrl;
+  svgRef.current = svg;
 
   const handleDownload = useCallback(async () => {
     setDownloading(true);
     try {
-      const res = await fetch(downloadRef.current);
-      if (!res.ok) throw new Error('Download failed');
-      const blob = await res.blob();
+      let blob: Blob;
+      if (hasLocalImage) {
+        blob = await svgToPngBlob(svgRef.current || '');
+      } else {
+        const res = await fetch(downloadRef.current);
+        if (!res.ok) throw new Error('Download failed');
+        blob = await res.blob();
+      }
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
@@ -55,7 +66,11 @@ export function ExportBar({
     } finally {
       setDownloading(false);
     }
-  }, [templateId]);
+  }, [hasLocalImage, templateId]);
+
+  const showLocalImageWarning = useCallback(() => {
+    window.showToast?.('Local images cannot be included in a shareable URL.', 'error');
+  }, []);
 
   const copyToClipboard = useCallback(async (text: string, label: string) => {
     try {
@@ -96,13 +111,14 @@ export function ExportBar({
       // Ctrl/Cmd+Shift+C → Copy API URL
       if (e.key === 'C' && e.shiftKey) {
         e.preventDefault();
-        copyToClipboard(apiUrlRef.current, 'url');
+        if (hasLocalImage) showLocalImageWarning();
+        else copyToClipboard(apiUrlRef.current, 'url');
       }
     }
 
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [handleDownload, copyToClipboard, shortcuts]);
+  }, [handleDownload, copyToClipboard, hasLocalImage, showLocalImageWarning, shortcuts]);
 
   const metaTags = generateMetaTags({
     title: params.title ? String(params.title) : undefined,
@@ -126,7 +142,7 @@ export function ExportBar({
         <button
           type="button"
           className="export-btn export-btn-ghost"
-          onClick={() => copyToClipboard(apiUrl, 'url')}
+          onClick={() => hasLocalImage ? showLocalImageWarning() : copyToClipboard(apiUrl, 'url')}
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
           {copied === 'url' ? 'Copied!' : 'Copy Image URL'}
@@ -134,7 +150,7 @@ export function ExportBar({
         <button
           type="button"
           className="export-btn export-btn-ghost"
-          onClick={() => copyToClipboard(metaTags, 'meta')}
+          onClick={() => hasLocalImage ? showLocalImageWarning() : copyToClipboard(metaTags, 'meta')}
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
           {copied === 'meta' ? 'Copied!' : 'Copy Meta Tags'}
diff --git a/src/components/editor/export-utils.ts b/src/components/editor/export-utils.ts
new file mode 100644
index 0000000..c35e0be
--- /dev/null
+++ b/src/components/editor/export-utils.ts
@@ -0,0 +1,22 @@
+export function containsLocalImage(params: Record<string, unknown>): boolean {
+  return Object.values(params).some(
+    (value) => typeof value === 'string' && value.trim().toLowerCase().startsWith('data:image/')
+  );
+}
+
+export function svgToPngBlob(svg: string, width = 1200, height = 630): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const context = canvas.getContext('2d');
+      if (!context) return reject(new Error('Canvas is not supported'));
+      context.drawImage(image, 0, 0, width, height);
+      canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('Could not create PNG'))), 'image/png');
+    };
+    image.onerror = () => reject(new Error('Could not render SVG'));
+    image.src = `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  });
+}
diff --git a/tests/components/export-utils.test.ts b/tests/components/export-utils.test.ts
new file mode 100644
index 0000000..2588f99
--- /dev/null
+++ b/tests/components/export-utils.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { containsLocalImage } from '../../src/components/editor/export-utils';
+
+describe('editor export utilities', () => {
+  it('detects local image data URLs', () => {
+    expect(containsLocalImage({ imageUrl: 'data:image/png;base64,abc' })).toBe(true);
+    expect(containsLocalImage({ imageUrl: 'https://example.com/photo.png' })).toBe(false);
+  });
+
+  it('ignores non-image data URLs and empty values', () => {
+    expect(containsLocalImage({ imageUrl: 'data:text/plain;base64,abc', title: '' })).toBe(false);
+    expect(containsLocalImage({ imageUrl: '   ' })).toBe(false);
+  });
+});

From d77063d97ba4feb3fbc6f4762af31b596109f309 Mon Sep 17 00:00:00 2001
From: P SRIKAR NAIDU <nsrikar24@gmail.com>
Date: Fri, 30 Oct 2026 21:48:51 +0530
Subject: [PATCH 2/2] fix(editor): update export test and handle canvas errors

---
 src/components/editor/ExportBar.tsx   | 3 ++-
 src/components/editor/export-utils.ts | 8 ++++++--
 tests/editor/export-bar.test.ts       | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/editor/ExportBar.tsx b/src/components/editor/ExportBar.tsx
index 580cc0e..0b14bac 100644
--- a/src/components/editor/ExportBar.tsx
+++ b/src/components/editor/ExportBar.tsx
@@ -45,7 +45,8 @@ export function ExportBar({
     try {
       let blob: Blob;
       if (hasLocalImage) {
-        blob = await svgToPngBlob(svgRef.current || '');
+        if (!svgRef.current) throw new Error('Preview is not ready');
+        blob = await svgToPngBlob(svgRef.current);
       } else {
         const res = await fetch(downloadRef.current);
         if (!res.ok) throw new Error('Download failed');
diff --git a/src/components/editor/export-utils.ts b/src/components/editor/export-utils.ts
index c35e0be..9214a2b 100644
--- a/src/components/editor/export-utils.ts
+++ b/src/components/editor/export-utils.ts
@@ -13,8 +13,12 @@ export function svgToPngBlob(svg: string, width = 1200, height = 630): Promise<B
       canvas.height = height;
       const context = canvas.getContext('2d');
       if (!context) return reject(new Error('Canvas is not supported'));
-      context.drawImage(image, 0, 0, width, height);
-      canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('Could not create PNG'))), 'image/png');
+      try {
+        context.drawImage(image, 0, 0, width, height);
+        canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('Could not create PNG'))), 'image/png');
+      } catch (error) {
+        reject(error);
+      }
     };
     image.onerror = () => reject(new Error('Could not render SVG'));
     image.src = `data:image/svg+xml,${encodeURIComponent(svg)}`;
diff --git a/tests/editor/export-bar.test.ts b/tests/editor/export-bar.test.ts
index fd83f40..e71d673 100644
--- a/tests/editor/export-bar.test.ts
+++ b/tests/editor/export-bar.test.ts
@@ -9,7 +9,7 @@ const { ExportBar } = await import('@/components/editor/ExportBar');
 
 function metaTagParams(params: Record<string, unknown>) {
   renderToString(
-    React.createElement(ExportBar, { apiUrl: '/api/og?x=1', downloadUrl: '/api/og?x=1', params, templateId: 'saas-maintenance' }),
+    React.createElement(ExportBar, { apiUrl: '/api/og?x=1', downloadUrl: '/api/og?x=1', params, templateId: 'saas-maintenance', svg: null }),
   );
   return generateMetaTags.mock.calls.at(-1)![0];
 }