upload image option (#64)

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",

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>

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

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 };
+    }),
 });

apps/web/src/server/nanoid.ts

@@ -4,3 +4,8 @@ export const smallNanoid = customAlphabet(
   "1234567890abcdefghijklmnopqrstuvwxyz",
   10
 );
+
+export const nanoid = customAlphabet(
+  "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  21
+);

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;
+};

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:

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:

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);
     },

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({
+const uploadKey = new PluginKey("upload-image");
-  addAttributes() {
+
-    return {
+export type UploadFn = (image: File) => Promise<string>;
-      ...this.parent?.(),
+
-      width: { renderHTML: ({ width }) => ({ width }), default: "600" },
+interface ResizableImageExtensionOptions {
-      height: { renderHTML: ({ height }) => ({ height }) },
+  uploadImage?: UploadFn;
-      borderRadius: {
+}
-        default: "0",
+
-      },
+export const ResizableImageExtension =
-      borderWidth: {
+  TipTapImage.extend<ResizableImageExtensionOptions>({
-        default: "0",
+    addAttributes() {
-      },
+      return {
-      borderColor: {
+        ...this.parent?.(),
-        default: "rgb(0, 0, 0)",
+        width: { renderHTML: ({ width }) => ({ width }), default: "600" },
-      },
+        height: { renderHTML: ({ height }) => ({ height }) },
-      alignment: {
+        borderRadius: {
-        default: "center",
+          default: "0",
-        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) => {
+        borderWidth: {
-          const externalLink = element.getAttribute("data-external-link");
+          default: "0",
-          return externalLink ? { externalLink } : null;
         },
-      },
+        borderColor: {
-      alt: {
+          default: "rgb(0, 0, 0)",
-        default: "image",
+        },
-      },
+        alignment: {
-    };
+          default: "center",
-  },
+          renderHTML: ({ alignment }) => ({ "data-alignment": alignment }),
-  addNodeView() {
+          parseHTML: (element) =>
-    return ReactNodeViewRenderer(ResizableImageTemplate);
+            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;
+              },
+            },
+          },
+        }),
+      ];
+    },
+  });

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) {
+        if (!imageUrl) {
-        return;
+          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) => {
+      return [...DEFAULT_SLASH_COMMANDS(uploadImage), ...commands].filter(
-        if (typeof query === "string" && query.length > 0) {
+        (item) => {
-          const search = query.toLowerCase();
+          if (typeof query === "string" && query.length > 0) {
-          return (
+            const search = query.toLowerCase();
-            item.title.toLowerCase().includes(search) ||
+            return (
-            item.description.toLowerCase().includes(search) ||
+              item.title.toLowerCase().includes(search) ||
-            (item.searchTerms &&
+              item.description.toLowerCase().includes(search) ||
-              item.searchTerms.some((term: string) => term.includes(search)))
+              (item.searchTerms &&
-          );
+                item.searchTerms.some((term: string) => term.includes(search)))
+            );
+          }
+          return true;
         }
-        return true;
+      );
-      });
     },
     render: () => {
       let component: ReactRenderer<any>;

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;

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}

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
+          {isUploading ? (
-            {...attrs}
+            <div className="relative w-full h-full">
-            ref={imgRef}
+              <img
-            style={{
+                {...attrs}
-              ...resizingStyle,
+                className="flex items-center justify-center opacity-70"
-              cursor: "default",
+              />
-              marginBottom: 0,
+              <div className="absolute inset-0 flex items-center justify-center">
-            }}
+                <Spinner className="w-8 h-8 text-primary" />
-          />
+              </div>
-          {selected && (
+            </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>
+                <Tooltip>
-                  <Button
+                  <TooltipTrigger asChild>
-                    variant="ghost"
+                    <PopoverTrigger asChild>
-                    className="px-2"
+                      <Button
-                    size="sm"
+                        variant="ghost"
-                    type="button"
+                        className="px-2"
-                    onClick={() => setOpenAltText(true)}
+                        size="sm"
-                  >
+                        type="button"
-                    <Tooltip>
+                        onClick={() => setOpenAltText(true)}
-                      <TooltipTrigger>
+                      >
                         <TypeIcon className="h-4 w-4 " />
-                      </TooltipTrigger>
+                      </Button>
-                      <TooltipContent>Alt text</TooltipContent>
+                    </PopoverTrigger>
-                    </Tooltip>
+                  </TooltipTrigger>
-                  </Button>
+                  <TooltipContent>Alt text</TooltipContent>
-                </PopoverTrigger>
+                </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>
+                <Tooltip>
-                  <Button
+                  <TooltipTrigger asChild>
-                    variant="ghost"
+                    <PopoverTrigger asChild>
-                    className="px-2"
+                      <Button
-                    size="sm"
+                        variant="ghost"
-                    type="button"
+                        className="px-2"
-                    onClick={() => setOpenLink(true)}
+                        size="sm"
-                  >
+                        type="button"
-                    <Tooltip>
+                        onClick={() => setOpenLink(true)}
-                      <TooltipTrigger>
+                      >
                         <LinkIcon className="h-4 w-4 " />
-                      </TooltipTrigger>
+                      </Button>
-                      <TooltipContent>Link</TooltipContent>
+                    </PopoverTrigger>
-                    </Tooltip>
+                  </TooltipTrigger>
-                  </Button>
+
-                </PopoverTrigger>
+                  <TooltipContent>Link</TooltipContent>
+                </Tooltip>
                 <PopoverContent className="light border-gray-200 px-4 py-2">
                   <LinkEditorPanel
                     initialUrl={externalLink}

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"]
 }

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": {