Image uploader prop for image block

Author: Rajat

apps/docs/components/email-block-demo.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState, type ChangeEvent } from "react";
 import {
     ContactFilterBuilder,
     EmailEditor,
@@ -22,6 +22,13 @@ import {
     type SystemTemplateSummary,
     type TriggerOption,
 } from "@sendlit/email-blocks";
+import {
+    ImageBlock,
+    Link,
+    Separator,
+    Text,
+    type UploaderProps,
+} from "@sendlit/email-editor/blocks";
 
 type DemoName =
     | "contact-filter-builder"
@@ -369,6 +376,53 @@ const savedTemplates: EmailTemplate[] = [
     },
 ];
 
+function LocalImageUploader({ children, onChange }: UploaderProps) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const file = event.currentTarget.files?.[0];
+        if (!file) {
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result !== "string") {
+                return;
+            }
+
+            onChange({
+                src: reader.result,
+                alt: file.name,
+            });
+        };
+        reader.readAsDataURL(file);
+        event.currentTarget.value = "";
+    };
+
+    return (
+        <span className="inline-flex" onClick={() => inputRef.current?.click()}>
+            {children}
+            <input
+                ref={inputRef}
+                type="file"
+                accept="image/*"
+                className="sr-only"
+                tabIndex={-1}
+                onClick={(event) => event.stopPropagation()}
+                onChange={handleFileChange}
+            />
+        </span>
+    );
+}
+
+const emailEditorBlocks = [
+    Text,
+    Separator,
+    Link,
+    ImageBlock.configure({ uploader: LocalImageUploader }),
+];
+
 export function EmailBlockDemo({ demo }: { demo: DemoName }) {
     const [filter, setFilter] =
         useState<ContactFilterWithAggregator>(initialFilter);
@@ -616,6 +670,7 @@ export function EmailBlockDemo({ demo }: { demo: DemoName }) {
                     <EmailEditor
                         email={editorEmail}
                         onChange={setEditorEmail}
+                        blocks={emailEditorBlocks}
                     />
                 </DemoFrame>
             );

apps/docs/content/docs/email-blocks/email-editor.mdx

@@ -19,7 +19,7 @@ its types without you needing a second dependency.
 
 ## Usage
 
-This is the exact code behind the demo above.
+### Simple editor
 
 ```tsx
 import { useState } from "react";
@@ -36,6 +36,80 @@ function Example() {
 }
 ```
 
+### Custom image uploader
+
+Use `blocks` to replace the default image block settings with a wrapper that
+opens your own uploader from the existing image upload button.
+
+```tsx
+import { useRef, useState, type ChangeEvent } from "react";
+import {
+    EmailEditor,
+    defaultTemplateEmail,
+    type Email,
+} from "@sendlit/email-blocks";
+import {
+    ImageBlock,
+    Link,
+    Separator,
+    Text,
+    type UploaderProps,
+} from "@sendlit/email-editor/blocks";
+
+function LocalImageUploader({ children, onChange }: UploaderProps) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const file = event.currentTarget.files?.[0];
+        if (!file) {
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result !== "string") {
+                return;
+            }
+
+            onChange({
+                src: reader.result,
+                alt: file.name,
+            });
+        };
+        reader.readAsDataURL(file);
+        event.currentTarget.value = "";
+    };
+
+    return (
+        <span className="inline-flex" onClick={() => inputRef.current?.click()}>
+            {children}
+            <input
+                ref={inputRef}
+                type="file"
+                accept="image/*"
+                className="sr-only"
+                tabIndex={-1}
+                onClick={(event) => event.stopPropagation()}
+                onChange={handleFileChange}
+            />
+        </span>
+    );
+}
+
+const blocks = [
+    Text,
+    Separator,
+    Link,
+    ImageBlock.configure({ uploader: LocalImageUploader }),
+];
+
+function Example() {
+    const [email, setEmail] = useState<Email>(defaultTemplateEmail);
+
+    return <EmailEditor email={email} onChange={setEmail} blocks={blocks} />;
+}
+```
+
 Pass the same `Email` value to [`EmailPreview`](/email-blocks/email-preview)
 or `renderEmailToHtml` (also re-exported) to see the rendered result or
 generate the HTML you actually send.

packages/email-editor/package.json

@@ -18,7 +18,11 @@
             "default": "./dist/index.mjs"
         },
         "./styles.css": "./dist/index.css",
-        "./blocks": "./dist/blocks"
+        "./blocks": {
+            "types": "./dist/blocks/index.d.ts",
+            "import": "./dist/blocks/index.mjs",
+            "default": "./dist/blocks/index.mjs"
+        }
     },
     "publishConfig": {
         "access": "public"

packages/email-editor/src/blocks/image/index.ts

@@ -2,9 +2,26 @@ import { ImageBlock as block } from "./block";
 import { ImageSettings as settings } from "./settings";
 import { metadata } from "./metadata";
 import type { BlockComponent } from "@/types/block-registry";
+import type { ImageBlockConfig, ImageBlockSettings } from "./types";
 
-export const ImageBlock: BlockComponent = {
+type ConfigurableImageBlock = BlockComponent<ImageBlockSettings> & {
+    configure: (config: ImageBlockConfig) => BlockComponent<ImageBlockSettings>;
+};
+
+const baseImageBlock: BlockComponent<ImageBlockSettings> = {
     block,
     settings,
     metadata,
 };
+
+export const ImageBlock: ConfigurableImageBlock = {
+    ...baseImageBlock,
+    configure: ({ uploader }) => {
+        const Settings = settings;
+
+        return {
+            ...baseImageBlock,
+            settings: (props) => Settings({ ...props, uploader }),
+        };
+    },
+};

packages/email-editor/src/blocks/image/settings.tsx

@@ -1,5 +1,5 @@
 import type { EmailBlock, EmailStyle } from "@/types/email-editor";
-import type { ImageBlockSettings } from "./types";
+import type { ImageBlockSettings, Uploader, UploadedImage } from "./types";
 import { SettingsInput } from "@/components/settings/settings-input";
 import { SettingsSelect } from "@/components/settings/settings-select";
 import { SettingsColorPicker } from "@/components/settings/settings-color-picker";
@@ -8,16 +8,18 @@ import { SettingsSection } from "@/components/settings/settings-section";
 import { Button } from "@/components/ui/button";
 import { Upload } from "lucide-react";
 
-interface ImageSettingsProps {
+export interface ImageSettingsProps {
     block: Required<EmailBlock> & { settings: ImageBlockSettings };
     style?: EmailStyle;
     updateBlock: (id: string, content: Partial<EmailBlock>) => void;
+    uploader?: Uploader;
 }
 
 export function ImageSettings({
     block,
     style,
     updateBlock,
+    uploader: UploaderComponent,
 }: ImageSettingsProps) {
     const handleSettingChange = (key: string, value: any) => {
         updateBlock(block.id, {
@@ -35,6 +37,15 @@ export function ImageSettings({
         }
     };
 
+    const handleUploadedImageChange = (image: UploadedImage) => {
+        updateBlock(block.id, {
+            settings: {
+                ...block.settings,
+                ...image,
+            },
+        });
+    };
+
     // Helper function to convert px string to number
     const pxToNumber = (
         value: string | undefined,
@@ -49,6 +60,40 @@ export function ImageSettings({
     const borderRadius = pxToNumber(block.settings.borderRadius, 0);
     const borderWidth = pxToNumber(block.settings.borderWidth, 0);
 
+    const uploadButton = (
+        <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={
+                UploaderComponent
+                    ? undefined
+                    : (event) => {
+                          event.preventDefault();
+                          handleImageUpload();
+                      }
+            }
+            title="Browse for image"
+        >
+            <Upload className="h-4 w-4" />
+        </Button>
+    );
+
+    let uploadControl = uploadButton;
+    if (UploaderComponent) {
+        uploadControl = (
+            <UploaderComponent
+                value={{
+                    ...block.settings,
+                    src: block.settings.src || "",
+                }}
+                onChange={handleUploadedImageChange}
+            >
+                {uploadButton}
+            </UploaderComponent>
+        );
+    }
+
     // Sample images
     const sampleImages = [
         "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&h=300&fit=crop",
@@ -112,18 +157,7 @@ export function ImageSettings({
                         placeholder="https://example.com/image.jpg"
                         className="flex-1"
                     />
-                    <Button
-                        type="button"
-                        variant="outline"
-                        size="icon"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            handleImageUpload();
-                        }}
-                        title="Browse for image"
-                    >
-                        <Upload className="h-4 w-4" />
-                    </Button>
+                    {uploadControl}
                 </div>
             </div>
 

packages/email-editor/src/blocks/image/types.ts

@@ -1,3 +1,4 @@
+import type { ComponentType, ReactNode } from "react";
 import type { CommonBlockSettings } from "@/types/email-editor";
 
 export interface ImageBlockSettings extends CommonBlockSettings {
@@ -13,3 +14,18 @@ export interface ImageBlockSettings extends CommonBlockSettings {
     borderColor?: string;
     padding?: string;
 }
+
+export type UploadedImage = Partial<ImageBlockSettings> &
+    Pick<ImageBlockSettings, "src">;
+
+export interface UploaderProps {
+    value: UploadedImage;
+    onChange: (image: UploadedImage) => void;
+    children: ReactNode;
+}
+
+export type Uploader = ComponentType<UploaderProps>;
+
+export interface ImageBlockConfig {
+    uploader?: Uploader;
+}

packages/email-editor/src/blocks/index.ts

@@ -1,4 +1,12 @@
 export { TextBlock as Text } from "./text";
 export { SeparatorBlock as Separator } from "./separator";
-export { ImageBlock as Image } from "./image";
+export { ImageBlock, ImageBlock as Image } from "./image";
+export type {
+    ImageBlockConfig,
+    ImageBlockSettings,
+    Uploader,
+    UploaderProps,
+    UploadedImage,
+} from "./image/types";
+export type { ImageSettingsProps } from "./image/settings";
 export { LinkBlock as Link } from "./link";

packages/email-editor/src/components/block-settings-panel.tsx

@@ -1,7 +1,11 @@
 import { X, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { EmailSettings } from "./email-settings";
-import type { Email, EmailStyle } from "../types/email-editor";
+import type {
+    Email,
+    EmailStyle,
+    RuntimeEmailBlock,
+} from "../types/email-editor";
 import type { BlockRegistry } from "../types/block-registry";
 import type { EmailBlock } from "../types/email-editor";
 
@@ -48,7 +52,8 @@ export function BlockSettingsPanel({
         );
     }
 
-    const block = email.content.find((b) => b.id === blockId);
+    const block = email.content.find((b) => b.id === blockId) as
+        RuntimeEmailBlock | undefined;
 
     if (!block) return null;