upload image option (#64)

2024-08-26 20:46:38 +10:00
parent 676f5c8c64
commit f9105971f0
17 changed files with 1595 additions and 163 deletions
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -18,8 +18,10 @@
  },
  "dependencies": {
    "@auth/prisma-adapter": "^1.4.0",
+    "@aws-sdk/client-s3": "^3.637.0",
    "@aws-sdk/client-sesv2": "^3.535.0",
    "@aws-sdk/client-sns": "^3.540.0",
+    "@aws-sdk/s3-request-presigner": "^3.637.0",
    "@hono/swagger-ui": "^0.2.1",
    "@hono/zod-openapi": "^0.10.0",
    "@hookform/resolvers": "^3.3.4",
--- a/apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx
+++ b/apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx
@@ -40,6 +40,8 @@ const sendSchema = z.object({
  confirmation: z.string(),
 });

+const IMAGE_SIZE_LIMIT = 10 * 1024 * 1024;
+
 export default function EditCampaignPage({
  params,
 }: {
@@ -79,7 +81,11 @@ export default function EditCampaignPage({
  return <CampaignEditor campaign={campaign} />;
 }

-function CampaignEditor({ campaign }: { campaign: Campaign }) {
+function CampaignEditor({
+  campaign,
+}: {
+  campaign: Campaign & { imageUploadSupported: boolean };
+}) {
  const contactBooksQuery = api.contacts.getContactBooks.useQuery();
  const utils = api.useUtils();

@@ -100,6 +106,7 @@ function CampaignEditor({ campaign }: { campaign: Campaign }) {
    },
  });
  const sendCampaignMutation = api.campaign.sendCampaign.useMutation();
+  const getUploadUrl = api.campaign.generateImagePresignedUrl.useMutation();

  const sendForm = useForm<z.infer<typeof sendSchema>>({
    resolver: zodResolver(sendSchema),
@@ -143,6 +150,33 @@ function CampaignEditor({ campaign }: { campaign: Campaign }) {
    );
  }

+  const handleFileChange = async (file: File) => {
+    if (file.size > IMAGE_SIZE_LIMIT) {
+      throw new Error(
+        `File should be less than ${IMAGE_SIZE_LIMIT / 1024 / 1024}MB`
+      );
+    }
+
+    console.log("file type: ", file.type);
+
+    const { uploadUrl, imageUrl } = await getUploadUrl.mutateAsync({
+      name: file.name,
+      type: file.type,
+      campaignId: campaign.id,
+    });
+
+    const response = await fetch(uploadUrl, {
+      method: "PUT",
+      body: file,
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to upload file");
+    }
+
+    return imageUrl;
+  };
+
  const confirmation = sendForm.watch("confirmation");

  return (
@@ -339,6 +373,9 @@ function CampaignEditor({ campaign }: { campaign: Campaign }) {
            deboucedUpdateCampaign();
          }}
          variables={["email", "firstName", "lastName"]}
+          uploadImage={
+            campaign.imageUploadSupported ? handleFileChange : undefined
+          }
        />
      </div>
    </div>
--- a/apps/web/src/env.js
+++ b/apps/web/src/env.js
@@ -49,6 +49,10 @@ export const env = createEnv({
      .string()
      .default("false")
      .transform((str) => str === "true"), // Converts string "true" to boolean true
+    S3_COMPATIBLE_ACCESS_KEY: z.string().optional(),
+    S3_COMPATIBLE_SECRET_KEY: z.string().optional(),
+    S3_COMPATIBLE_API_URL: z.string().optional(),
+    S3_COMPATIBLE_PUBLIC_URL: z.string().optional(),
  },

  /**
@@ -88,6 +92,10 @@ export const env = createEnv({
    REDIS_URL: process.env.REDIS_URL,
    FROM_EMAIL: process.env.FROM_EMAIL,
    ENABLE_PRISMA_CLIENT: process.env.ENABLE_PRISMA_CLIENT, // Add this line
+    S3_COMPATIBLE_ACCESS_KEY: process.env.S3_COMPATIBLE_ACCESS_KEY,
+    S3_COMPATIBLE_SECRET_KEY: process.env.S3_COMPATIBLE_SECRET_KEY,
+    S3_COMPATIBLE_API_URL: process.env.S3_COMPATIBLE_API_URL,
+    S3_COMPATIBLE_PUBLIC_URL: process.env.S3_COMPATIBLE_PUBLIC_URL,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
--- a/apps/web/src/server/api/routers/campaign.ts
+++ b/apps/web/src/server/api/routers/campaign.ts
@@ -1,17 +1,24 @@
 import { Prisma } from "@prisma/client";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
+import { env } from "~/env";
 import {
  teamProcedure,
  createTRPCRouter,
  campaignProcedure,
  publicProcedure,
 } from "~/server/api/trpc";
+import { nanoid } from "~/server/nanoid";
 import {
  sendCampaign,
  subscribeContact,
 } from "~/server/service/campaign-service";
 import { validateDomainFromEmail } from "~/server/service/domain-service";
+import {
+  DEFAULT_BUCKET,
+  getDocumentUploadUrl,
+  isStorageConfigured,
+} from "~/server/service/storage-service";

 export const campaignRouter = createTRPCRouter({
  getCampaigns: teamProcedure
@@ -137,13 +144,19 @@ export const campaignRouter = createTRPCRouter({
      });
    }

+    const imageUploadSupported = isStorageConfigured();
+
    if (campaign?.contactBookId) {
      const contactBook = await db.contactBook.findUnique({
        where: { id: campaign.contactBookId },
      });
-      return { ...campaign, contactBook };
+      return { ...campaign, contactBook, imageUploadSupported };
    }
-    return { ...campaign, contactBook: null };
+    return {
+      ...campaign,
+      contactBook: null,
+      imageUploadSupported,
+    };
  }),

  sendCampaign: campaignProcedure.mutation(
@@ -180,4 +193,25 @@ export const campaignRouter = createTRPCRouter({
      return newCampaign;
    }
  ),
+
+  generateImagePresignedUrl: campaignProcedure
+    .input(
+      z.object({
+        name: z.string(),
+        type: z.string(),
+      })
+    )
+    .mutation(async ({ ctx: { team }, input }) => {
+      const extension = input.name.split(".").pop();
+      const randomName = `${nanoid()}.${extension}`;
+
+      const url = await getDocumentUploadUrl(
+        `${team.id}/${randomName}`,
+        input.type
+      );
+
+      const imageUrl = `${env.S3_COMPATIBLE_PUBLIC_URL}/${DEFAULT_BUCKET}/${team.id}/${randomName}`;
+
+      return { uploadUrl: url, imageUrl };
+    }),
 });
--- a/apps/web/src/server/nanoid.ts
+++ b/apps/web/src/server/nanoid.ts
@@ -4,3 +4,8 @@ export const smallNanoid = customAlphabet(
  "1234567890abcdefghijklmnopqrstuvwxyz",
  10
 );
+
+export const nanoid = customAlphabet(
+  "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  21
+);
--- a/apps/web/src/server/service/storage-service.ts
+++ b/apps/web/src/server/service/storage-service.ts
@@ -0,0 +1,63 @@
+import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { env } from "~/env";
+
+let S3: S3Client | null = null;
+export const DEFAULT_BUCKET = "unsend";
+
+export const isStorageConfigured = () =>
+  !!(
+    env.S3_COMPATIBLE_ACCESS_KEY &&
+    env.S3_COMPATIBLE_API_URL &&
+    env.S3_COMPATIBLE_PUBLIC_URL &&
+    env.S3_COMPATIBLE_SECRET_KEY
+  );
+
+const getClient = () => {
+  if (
+    !S3 &&
+    env.S3_COMPATIBLE_ACCESS_KEY &&
+    env.S3_COMPATIBLE_API_URL &&
+    env.S3_COMPATIBLE_PUBLIC_URL &&
+    env.S3_COMPATIBLE_SECRET_KEY
+  ) {
+    S3 = new S3Client({
+      region: "auto",
+      endpoint: env.S3_COMPATIBLE_API_URL,
+      credentials: {
+        accessKeyId: env.S3_COMPATIBLE_ACCESS_KEY,
+        secretAccessKey: env.S3_COMPATIBLE_SECRET_KEY,
+      },
+      forcePathStyle: true, // needed for minio
+    });
+  }
+
+  return S3;
+};
+
+export const getDocumentUploadUrl = async (
+  key: string,
+  fileType: string,
+  bucket: string = DEFAULT_BUCKET
+) => {
+  const s3Client = getClient();
+
+  if (!s3Client) {
+    throw new Error("R2 is not configured");
+  }
+
+  const url = await getSignedUrl(
+    s3Client,
+    new PutObjectCommand({
+      Bucket: bucket,
+      Key: key,
+      ContentType: fileType,
+    }),
+    {
+      expiresIn: 3600,
+      signableHeaders: new Set(["content-type"]),
+    }
+  );
+
+  return url;
+};
--- a/docker/dev/compose.yml
+++ b/docker/dev/compose.yml
@@ -24,6 +24,21 @@ services:
      - redis:/data
    command: ["redis-server", "--maxmemory-policy", "noeviction"]

+  minio:
+    image: minio/minio
+    container_name: unsend-storage-dev
+    ports:
+      - 9002:9002
+      - 9001:9001
+    volumes:
+      - minio:/data
+    environment:
+      MINIO_ROOT_USER: unsend
+      MINIO_ROOT_PASSWORD: password
+    entrypoint: sh
+    command: -c 'mkdir -p /data/unsend && minio server /data --console-address ":9001" --address ":9002"'
+
 volumes:
  database:
  redis:
+  minio:
--- a/docker/prod/compose.yml
+++ b/docker/prod/compose.yml
@@ -29,6 +29,20 @@ services:
      - cache:/data
    command: ["redis-server", "--maxmemory-policy", "noeviction"]

+  minio:
+    image: minio/minio
+    container_name: unsend-storage-prod
+    ports:
+      - 9002:9002
+      - 9001:9001
+    volumes:
+      - storage:/data
+    environment:
+      MINIO_ROOT_USER: unsend
+      MINIO_ROOT_PASSWORD: password
+    entrypoint: sh
+    command: -c 'mkdir -p /data/unsend && minio server /data --console-address ":9001" --address ":9002"'
+
  unsend:
    image: unsend/unsend:latest
    container_name: unsend
@@ -57,3 +71,4 @@ services:
 volumes:
  database:
  cache:
+  storage:
--- a/packages/email-editor/src/editor.tsx
+++ b/packages/email-editor/src/editor.tsx
@@ -15,6 +15,7 @@ import { cn } from "@unsend/ui/lib/utils";
 import { extensions } from "./extensions";
 import LinkMenu from "./menus/LinkMenu";
 import { Content, Editor as TipTapEditor } from "@tiptap/core";
+import { UploadFn } from "./extensions/ImageExtension";

 const content = `<h2>Hello World!</h2>

@@ -65,12 +66,14 @@ export type EditorProps = {
  onUpdate?: (content: TipTapEditor) => void;
  initialContent?: Content;
  variables?: Array<string>;
+  uploadImage?: UploadFn;
 };

 export const Editor: React.FC<EditorProps> = ({
  onUpdate,
  initialContent,
  variables,
+  uploadImage,
 }) => {
  const menuContainerRef = useRef(null);

@@ -91,7 +94,7 @@ export const Editor: React.FC<EditorProps> = ({
        },
      },
    },
-    extensions: extensions({ variables }),
+    extensions: extensions({ variables, uploadImage }),
    onUpdate: ({ editor }) => {
      onUpdate?.(editor);
    },
--- a/packages/email-editor/src/extensions/ImageExtension.tsx
+++ b/packages/email-editor/src/extensions/ImageExtension.tsx
@@ -1,49 +1,142 @@
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import TipTapImage from "@tiptap/extension-image";
 import { ResizableImageTemplate } from "../nodes/image-resize";
+import { PluginKey, Plugin } from "@tiptap/pm/state";
+import { toast } from "@unsend/ui/src/toaster";

-export const ResizableImageExtension = TipTapImage.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: { renderHTML: ({ width }) => ({ width }), default: "600" },
-      height: { renderHTML: ({ height }) => ({ height }) },
-      borderRadius: {
-        default: "0",
-      },
-      borderWidth: {
-        default: "0",
-      },
-      borderColor: {
-        default: "rgb(0, 0, 0)",
-      },
-      alignment: {
-        default: "center",
-        renderHTML: ({ alignment }) => ({ "data-alignment": alignment }),
-        parseHTML: (element) =>
-          element.getAttribute("data-alignment") || "center",
-      },
-      externalLink: {
-        default: null,
-        renderHTML: ({ externalLink }) => {
-          if (!externalLink) {
-            return {};
-          }
-          return {
-            "data-external-link": externalLink,
-          };
+const uploadKey = new PluginKey("upload-image");
+
+export type UploadFn = (image: File) => Promise<string>;
+
+interface ResizableImageExtensionOptions {
+  uploadImage?: UploadFn;
+}
+
+export const ResizableImageExtension =
+  TipTapImage.extend<ResizableImageExtensionOptions>({
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: { renderHTML: ({ width }) => ({ width }), default: "600" },
+        height: { renderHTML: ({ height }) => ({ height }) },
+        borderRadius: {
+          default: "0",
        },
-        parseHTML: (element) => {
-          const externalLink = element.getAttribute("data-external-link");
-          return externalLink ? { externalLink } : null;
+        borderWidth: {
+          default: "0",
        },
-      },
-      alt: {
-        default: "image",
-      },
-    };
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer(ResizableImageTemplate);
-  },
-});
+        borderColor: {
+          default: "rgb(0, 0, 0)",
+        },
+        alignment: {
+          default: "center",
+          renderHTML: ({ alignment }) => ({ "data-alignment": alignment }),
+          parseHTML: (element) =>
+            element.getAttribute("data-alignment") || "center",
+        },
+        externalLink: {
+          default: null,
+          renderHTML: ({ externalLink }) => {
+            if (!externalLink) {
+              return {};
+            }
+            return {
+              "data-external-link": externalLink,
+            };
+          },
+          parseHTML: (element) => {
+            const externalLink = element.getAttribute("data-external-link");
+            return externalLink ? { externalLink } : null;
+          },
+        },
+        alt: {
+          default: "image",
+        },
+        isUploading: {
+          default: false,
+        },
+      };
+    },
+    addNodeView() {
+      return ReactNodeViewRenderer(ResizableImageTemplate);
+    },
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          key: uploadKey,
+          props: {
+            handleDOMEvents: {
+              drop: (view, event) => {
+                event.preventDefault();
+
+                const hasFiles = event.dataTransfer?.files?.length;
+                if (!hasFiles) return false;
+
+                const image = Array.from(event.dataTransfer.files).find(
+                  (file) => file.type.startsWith("image/")
+                );
+
+                if (!this.options.uploadImage) {
+                  toast.error("Upload image is not supported");
+                  return true;
+                }
+
+                if (!image) {
+                  toast.error("Only image is supported");
+                  return true;
+                }
+
+                event.preventDefault();
+
+                const { schema } = view.state;
+
+                if (!schema.nodes.image) return false;
+
+                const coordinates = view.posAtCoords({
+                  left: event.clientX,
+                  top: event.clientY,
+                });
+
+                const placeholder = URL.createObjectURL(image);
+                const node = schema.nodes.image.create({
+                  src: placeholder,
+                  isUploading: true,
+                });
+                const transaction = view.state.tr.insert(
+                  coordinates?.pos || 0,
+                  node
+                );
+                view.dispatch(transaction);
+
+                this.options
+                  .uploadImage?.(image)
+                  .then((url) => {
+                    const updateTransaction = view.state.tr.setNodeMarkup(
+                      coordinates?.pos || 0,
+                      null,
+                      {
+                        src: url,
+                        isUploading: false,
+                      }
+                    );
+                    view.dispatch(updateTransaction);
+                  })
+                  .catch((error) => {
+                    // Remove the placeholder image node if there's an error
+                    const removeTransaction = view.state.tr.delete(
+                      coordinates?.pos || 0,
+                      (coordinates?.pos || 0) + 1
+                    );
+                    view.dispatch(removeTransaction);
+                    toast.error("Error uploading image:", error.message);
+                    console.error("Error uploading image:", error);
+                  });
+
+                return true;
+              },
+            },
+          },
+        }),
+      ];
+    },
+  });
--- a/packages/email-editor/src/extensions/SlashCommand.tsx
+++ b/packages/email-editor/src/extensions/SlashCommand.tsx
@@ -27,6 +27,7 @@ import {
  useState,
 } from "react";
 import tippy, { GetReferenceClientRect } from "tippy.js";
+import { UploadFn } from "./ImageExtension";

 export interface CommandProps {
  editor: Editor;
@@ -65,6 +66,7 @@ export const SlashCommand = Extension.create({
          props.command({ editor, range });
        },
      },
+      uploadImage: undefined as UploadFn | undefined,
    };
  },
  addProseMirrorPlugins() {
@@ -77,7 +79,7 @@ export const SlashCommand = Extension.create({
  },
 });

-const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
+const DEFAULT_SLASH_COMMANDS = (uploadImage?: UploadFn): SlashCommandItem[] => [
  {
    title: "Text",
    description: "Just start typing with plain text.",
@@ -158,14 +160,46 @@ const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
    searchTerms: ["image"],
    icon: <ImageIcon className="h-4 w-4" />,
    command: ({ editor, range }: CommandProps) => {
-      const imageUrl = prompt("Image URL: ") || "";
+      if (uploadImage) {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.onchange = async () => {
+          const file = input.files?.[0];
+          if (file && uploadImage) {
+            editor.chain().focus().deleteRange(range).run();
+            const placeholder = URL.createObjectURL(file);
+            editor
+              .chain()
+              .focus()
+              .setImage({ src: placeholder })
+              .updateAttributes("image", { isUploading: true })
+              .run();
+            try {
+              console.log("before upload");
+              const url = await uploadImage(file);
+              editor
+                .chain()
+                .focus()
+                .updateAttributes("image", { src: url, isUploading: false })
+                .run();
+            } catch (e) {
+              editor.chain().focus().deleteNode("image").run();
+              console.error("Failed to upload image:", e);
+            }
+          }
+        };
+        input.click();
+      } else {
+        const imageUrl = prompt("Image URL: ") || "";

-      if (!imageUrl) {
-        return;
+        if (!imageUrl) {
+          return;
+        }
+
+        editor.chain().focus().deleteRange(range).run();
+        editor.chain().focus().setImage({ src: imageUrl }).run();
      }
-
-      editor.chain().focus().deleteRange(range).run();
-      editor.chain().focus().setImage({ src: imageUrl }).run();
    },
  },
  {
@@ -186,16 +220,6 @@ const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
      editor.chain().focus().deleteRange(range).toggleBlockquote().run();
    },
  },
-  // {
-  //   title: "Footer",
-  //   description: "Add a footer text to email.",
-  //   searchTerms: ["footer", "text"],
-  //   icon: <FootprintsIcon className="h-4 w-4" />,
-  //   command: ({ editor, range }: CommandProps) => {
-  //     editor.chain().focus().deleteRange(range).setFooter().run();
-  //   },
-  // },
-
  {
    title: "Button",
    description: "Add code.",
@@ -372,22 +396,25 @@ const CommandList = ({
 };

 export function getSlashCommandSuggestions(
-  commands: SlashCommandItem[] = []
+  commands: SlashCommandItem[] = [],
+  uploadImage?: UploadFn
 ): Omit<SuggestionOptions, "editor"> {
  return {
    items: ({ query }) => {
-      return [...DEFAULT_SLASH_COMMANDS, ...commands].filter((item) => {
-        if (typeof query === "string" && query.length > 0) {
-          const search = query.toLowerCase();
-          return (
-            item.title.toLowerCase().includes(search) ||
-            item.description.toLowerCase().includes(search) ||
-            (item.searchTerms &&
-              item.searchTerms.some((term: string) => term.includes(search)))
-          );
+      return [...DEFAULT_SLASH_COMMANDS(uploadImage), ...commands].filter(
+        (item) => {
+          if (typeof query === "string" && query.length > 0) {
+            const search = query.toLowerCase();
+            return (
+              item.title.toLowerCase().includes(search) ||
+              item.description.toLowerCase().includes(search) ||
+              (item.searchTerms &&
+                item.searchTerms.some((term: string) => term.includes(search)))
+            );
+          }
+          return true;
        }
-        return true;
-      });
+      );
    },
    render: () => {
      let component: ReactRenderer<any>;
--- a/packages/email-editor/src/extensions/index.ts
+++ b/packages/email-editor/src/extensions/index.ts
@@ -16,9 +16,15 @@ import { SlashCommand, getSlashCommandSuggestions } from "./SlashCommand";
 import { VariableExtension } from "./VariableExtension";
 import { getVariableSuggestions } from "../nodes/variable";
 import { UnsubscribeFooterExtension } from "./UnsubsubscribeExtension";
-import { ResizableImageExtension } from "./ImageExtension";
+import { ResizableImageExtension, UploadFn } from "./ImageExtension";

-export function extensions({ variables }: { variables?: Array<string> }) {
+export function extensions({
+  variables,
+  uploadImage,
+}: {
+  variables?: Array<string>;
+  uploadImage?: UploadFn;
+}) {
  const extensions = [
    StarterKit.configure({
      heading: {
@@ -64,7 +70,8 @@ export function extensions({ variables }: { variables?: Array<string> }) {
    TaskItem,
    TaskList,
    SlashCommand.configure({
-      suggestion: getSlashCommandSuggestions([]),
+      suggestion: getSlashCommandSuggestions([], uploadImage),
+      uploadImage,
    }),
    Placeholder.configure({
      placeholder: "write something on '/' for commands",
@@ -75,7 +82,7 @@ export function extensions({ variables }: { variables?: Array<string> }) {
      suggestion: getVariableSuggestions(variables),
    }),
    UnsubscribeFooterExtension,
-    ResizableImageExtension,
+    ResizableImageExtension.configure({ uploadImage }),
  ];

  return extensions;
--- a/packages/email-editor/src/nodes/button.tsx
+++ b/packages/email-editor/src/nodes/button.tsx
@@ -167,7 +167,7 @@ export function ButtonComponent(props: NodeViewProps) {
                <div className="flex">
                  {alignments.map((alignment) => (
                    <Tooltip key={alignment}>
-                      <TooltipTrigger>
+                      <TooltipTrigger asChild>
                        <Button
                          variant="ghost"
                          key={alignment}
--- a/packages/email-editor/src/nodes/image-resize.tsx
+++ b/packages/email-editor/src/nodes/image-resize.tsx
@@ -27,6 +27,7 @@ import {
  TooltipTrigger,
 } from "@unsend/ui/src/tooltip";
 import { Separator } from "@unsend/ui/src/separator";
+import Spinner from "@unsend/ui/src/spinner";
 import { LinkEditorPanel } from "../components/panels/LinkEditorPanel";
 import { TextEditorPanel } from "../components/panels/TextEditorPanel";

@@ -168,6 +169,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
    alt,
    borderRadius: _br,
    borderColor: _bc,
+    isUploading,
    ...attrs
  } = node.attrs || {};

@@ -195,18 +197,31 @@ export function ResizableImageTemplate(props: NodeViewProps) {
        }[alignment as string] || {}),
      }}
    >
-      <Popover open={props.selected}>
+      <Popover open={props.selected && !isUploading}>
        <PopoverTrigger>
-          <img
-            {...attrs}
-            ref={imgRef}
-            style={{
-              ...resizingStyle,
-              cursor: "default",
-              marginBottom: 0,
-            }}
-          />
-          {selected && (
+          {isUploading ? (
+            <div className="relative w-full h-full">
+              <img
+                {...attrs}
+                className="flex items-center justify-center opacity-70"
+              />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Spinner className="w-8 h-8 text-primary" />
+              </div>
+            </div>
+          ) : (
+            <img
+              {...attrs}
+              ref={imgRef}
+              style={{
+                ...resizingStyle,
+                cursor: "default",
+                marginBottom: 0,
+              }}
+            />
+          )}
+
+          {selected && !isUploading && (
            <>
              {dragButton("left")}
              {dragButton("right")}
@@ -239,7 +254,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
              <Separator orientation="vertical" className="h-6 my-auto" />
              {alignments.map((alignment) => (
                <Tooltip key={alignment}>
-                  <TooltipTrigger>
+                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      key={alignment}
@@ -326,7 +341,7 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                    onClick={() => setOpenImgSrc(true)}
                  >
                    <Tooltip>
-                      <TooltipTrigger>
+                      <TooltipTrigger asChild>
                        <ImageIcon className="h-4 w-4 " />
                      </TooltipTrigger>
                      <TooltipContent>Image source</TooltipContent>
@@ -346,22 +361,22 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                </PopoverContent>
              </Popover>
              <Popover open={openAltText} onOpenChange={setOpenAltText}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    className="px-2"
-                    size="sm"
-                    type="button"
-                    onClick={() => setOpenAltText(true)}
-                  >
-                    <Tooltip>
-                      <TooltipTrigger>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        className="px-2"
+                        size="sm"
+                        type="button"
+                        onClick={() => setOpenAltText(true)}
+                      >
                        <TypeIcon className="h-4 w-4 " />
-                      </TooltipTrigger>
-                      <TooltipContent>Alt text</TooltipContent>
-                    </Tooltip>
-                  </Button>
-                </PopoverTrigger>
+                      </Button>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>Alt text</TooltipContent>
+                </Tooltip>
                <PopoverContent className="light border-gray-200 px-4 py-2">
                  <TextEditorPanel
                    initialText={alt}
@@ -375,22 +390,23 @@ export function ResizableImageTemplate(props: NodeViewProps) {
                </PopoverContent>
              </Popover>
              <Popover open={openLink} onOpenChange={setOpenLink}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    className="px-2"
-                    size="sm"
-                    type="button"
-                    onClick={() => setOpenLink(true)}
-                  >
-                    <Tooltip>
-                      <TooltipTrigger>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        className="px-2"
+                        size="sm"
+                        type="button"
+                        onClick={() => setOpenLink(true)}
+                      >
                        <LinkIcon className="h-4 w-4 " />
-                      </TooltipTrigger>
-                      <TooltipContent>Link</TooltipContent>
-                    </Tooltip>
-                  </Button>
-                </PopoverTrigger>
+                      </Button>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+
+                  <TooltipContent>Link</TooltipContent>
+                </Tooltip>
                <PopoverContent className="light border-gray-200 px-4 py-2">
                  <LinkEditorPanel
                    initialUrl={externalLink}
--- a/packages/email-editor/tsconfig.lint.json
+++ b/packages/email-editor/tsconfig.lint.json
@@ -3,6 +3,6 @@
  "compilerOptions": {
    "outDir": "dist"
  },
-  "include": ["src", "turbo", "**/*.ts", "**/*.tsx"],
+  "include": ["src", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "dist"]
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/turbo.json
+++ b/turbo.json
@@ -33,7 +33,11 @@
        "UNSEND_API_KEY",
        "GOOGLE_CLIENT_ID",
        "GOOGLE_CLIENT_SECRET",
-        "NEXT_PUBLIC_IS_CLOUD"
+        "NEXT_PUBLIC_IS_CLOUD",
+        "S3_COMPATIBLE_ACCESS_KEY",
+        "S3_COMPATIBLE_SECRET_KEY",
+        "S3_COMPATIBLE_API_URL",
+        "S3_COMPATIBLE_PUBLIC_URL"
      ]
    },
    "lint": {