feat: fix image uploads, user mentions, and workflow routing

package.json

@@ -40,6 +40,7 @@
     "@tiptap/core": "^2.11.5",
     "@tiptap/extension-color": "^2.11.5",
     "@tiptap/extension-highlight": "^2.11.5",
+    "@tiptap/extension-image": "^2.27.2",
     "@tiptap/extension-link": "^2.11.5",
     "@tiptap/extension-mention": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",

src/app/globals.css

@@ -321,6 +321,11 @@ body {
   @apply border-t border-border my-6;
 }
 
+/* Inline image styles */
+.inline-desc-image {
+  @apply max-w-full rounded-lg my-2.5;
+}
+
 /* Mention styles */
 .rich-text-editor .ProseMirror .mention {
   @apply bg-primary/10 text-primary rounded px-1 py-0.5 font-medium;

src/components/editor/editor-toolbar.tsx

@@ -23,6 +23,7 @@ import {
   ToggleLeft,
   Code2,
   Minus,
+  ImageIcon,
 } from "lucide-react";
 import { useState, useCallback } from "react";
 
@@ -46,6 +47,7 @@ import { Separator } from "@/components/ui/separator";
 interface EditorToolbarProps {
   editor: Editor;
   onSetLink: () => void;
+  onImageUpload?: () => void;
 }
 
 const FONT_COLORS = [
@@ -110,7 +112,7 @@ const ToolbarButton = ({
   </TooltipProvider>
 );
 
-export const EditorToolbar = ({ editor, onSetLink }: EditorToolbarProps) => {
+export const EditorToolbar = ({ editor, onSetLink, onImageUpload }: EditorToolbarProps) => {
   const [showInsertMenu, setShowInsertMenu] = useState(false);
   const [showColorMenu, setShowColorMenu] = useState(false);
   const [showHighlightMenu, setShowHighlightMenu] = useState(false);
@@ -180,6 +182,15 @@ export const EditorToolbar = ({ editor, onSetLink }: EditorToolbarProps) => {
             <Minus className="mr-2 size-4" />
             Divider
           </DropdownMenuItem>
+          {onImageUpload && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={onImageUpload}>
+                <ImageIcon className="mr-2 size-4" />
+                Image
+              </DropdownMenuItem>
+            </>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
 
@@ -189,11 +200,11 @@ export const EditorToolbar = ({ editor, onSetLink }: EditorToolbarProps) => {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" size="sm" className="h-8 gap-1 px-2 text-xs">
-            {editor.isActive("heading", { level: 1 }) ? "H1" : 
-             editor.isActive("heading", { level: 2 }) ? "H2" :
-             editor.isActive("heading", { level: 3 }) ? "H3" :
-             editor.isActive("heading", { level: 4 }) ? "H4" :
-             "Text"}
+            {editor.isActive("heading", { level: 1 }) ? "H1" :
+              editor.isActive("heading", { level: 2 }) ? "H2" :
+                editor.isActive("heading", { level: 3 }) ? "H3" :
+                  editor.isActive("heading", { level: 4 }) ? "H4" :
+                    "Text"}
             <ChevronDown className="size-3" />
           </Button>
         </DropdownMenuTrigger>

src/components/editor/rich-text-editor.tsx

@@ -14,6 +14,7 @@ import TableHeader from "@tiptap/extension-table-header";
 import TableCell from "@tiptap/extension-table-cell";
 import TaskList from "@tiptap/extension-task-list";
 import TaskItem from "@tiptap/extension-task-item";
+import Image from "@tiptap/extension-image";
 import { useCallback, useEffect, forwardRef, useImperativeHandle, useRef } from "react";
 
 import { cn } from "@/lib/utils";
@@ -33,6 +34,7 @@ export interface RichTextEditorProps {
   minHeight?: string;
   showToolbar?: boolean;
   autofocus?: boolean;
+  onImageUpload?: (file: File) => Promise<string | null>;
 }
 
 export interface RichTextEditorRef {
@@ -56,11 +58,13 @@ export const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>
       minHeight = "120px",
       showToolbar = true,
       autofocus = false,
+      onImageUpload,
     },
     ref
   ) => {
     const isFocusedRef = useRef(false);
     const lastContentRef = useRef(content);
+    const imageInputRef = useRef<HTMLInputElement>(null);
 
     const editor = useEditor({
       extensions: [
@@ -128,6 +132,13 @@ export const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>
             class: "flex items-start gap-2",
           },
         }),
+        Image.configure({
+          inline: false,
+          allowBase64: false,
+          HTMLAttributes: {
+            class: "inline-desc-image",
+          },
+        }),
         ...(workspaceId ? [createMentionExtension()] : []),
         ...(workspaceId && projectId
           ? [createSlashCommandExtension(workspaceId, projectId)]
@@ -149,6 +160,66 @@ export const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>
             "[&_.is-editor-empty]:before:content-[attr(data-placeholder)] [&_.is-editor-empty]:before:text-muted-foreground [&_.is-editor-empty]:before:float-left [&_.is-editor-empty]:before:pointer-events-none [&_.is-editor-empty]:before:h-0"
           ),
         },
+        handlePaste: (view, event) => {
+          // Handle pasted images
+          const items = event.clipboardData?.items;
+          if (!items || !onImageUpload) return false;
+
+          for (const item of items) {
+            if (item.type.startsWith("image/")) {
+              event.preventDefault();
+              const file = item.getAsFile();
+              if (file) {
+                onImageUpload(file)
+                  .then((url) => {
+                    if (url) {
+                      // Use the current view state, not the captured one
+                      const { state, dispatch } = view;
+                      const imageNode = state.schema.nodes.image;
+                      if (imageNode) {
+                        const node = imageNode.create({ src: url });
+                        const transaction = state.tr.replaceSelectionWith(node);
+                        dispatch(transaction);
+                      }
+                    }
+                  })
+                  .catch((err) => {
+                    console.error("[RichTextEditor] Image upload failed:", err);
+                  });
+              }
+              return true;
+            }
+          }
+          return false;
+        },
+        handleDrop: (view, event) => {
+          // Handle dropped images
+          const files = event.dataTransfer?.files;
+          if (!files || !onImageUpload) return false;
+
+          for (const file of files) {
+            if (file.type.startsWith("image/")) {
+              event.preventDefault();
+              onImageUpload(file)
+                .then((url) => {
+                  if (url) {
+                    const { state, dispatch } = view;
+                    const imageNode = state.schema.nodes.image;
+                    if (imageNode) {
+                      const node = imageNode.create({ src: url });
+                      const transaction = state.tr.replaceSelectionWith(node);
+                      dispatch(transaction);
+                    }
+                  }
+                })
+                .catch((err) => {
+                  console.error("[RichTextEditor] Image upload failed:", err);
+                });
+              return true;
+            }
+          }
+          return false;
+        },
       },
       onUpdate: ({ editor: editorInstance }) => {
         lastContentRef.current = editorInstance.getHTML();
@@ -222,16 +293,53 @@ export const RichTextEditor = forwardRef<RichTextEditorRef, RichTextEditorProps>
         .run();
     }, [editor]);
 
+    const handleImageUploadClick = useCallback(() => {
+      imageInputRef.current?.click();
+    }, []);
+
+    const handleImageInputChange = useCallback(
+      async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file || !onImageUpload || !editor) return;
+
+        try {
+          const url = await onImageUpload(file);
+          if (url) {
+            editor.chain().focus().setImage({ src: url }).run();
+          }
+        } catch (error) {
+          console.error("Failed to upload image:", error);
+        }
+
+        // Reset the input so the same file can be selected again
+        event.target.value = "";
+      },
+      [editor, onImageUpload]
+    );
+
     if (!editor) {
       return null;
     }
 
     return (
       <div className={cn("rich-text-editor rounded-md border border-border", className)}>
         {showToolbar && editable && (
-          <EditorToolbar editor={editor} onSetLink={setLink} />
+          <EditorToolbar
+            editor={editor}
+            onSetLink={setLink}
+            onImageUpload={onImageUpload ? handleImageUploadClick : undefined}
+          />
         )}
 
+        {/* Hidden file input for image upload */}
+        <input
+          ref={imageInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleImageInputChange}
+        />
+
         {/* Bubble Menu for quick formatting */}
         {editable && (
           <BubbleMenu

src/features/attachments/api/route.ts

@@ -43,14 +43,11 @@ const app = new Hono()
 
       const attachments = await getAttachments(taskId, workspaceId);
 
-      // Add URLs to attachments
-      const storage = c.get("storage");
-      const attachmentsWithUrls = await Promise.all(
-        attachments.map(async (attachment) => ({
-          ...attachment,
-          url: storage.getFileView(ATTACHMENTS_BUCKET_ID, attachment.fileId).toString(),
-        }))
-      );
+      // Add URLs to attachments - use proxy URL for authentication support
+      const attachmentsWithUrls = attachments.map((attachment) => ({
+        ...attachment,
+        url: `/api/attachments/${attachment.$id}/preview?workspaceId=${workspaceId}`,
+      }));
 
       return c.json({ data: attachmentsWithUrls });
     }
@@ -113,8 +110,8 @@ const app = new Hono()
           uploadedBy: user.$id,
         });
 
-        // Add URL to response
-        const url = storage.getFileView(ATTACHMENTS_BUCKET_ID, attachment.fileId).toString();
+        // Add URL to response - Use proxy URL for authentication support
+        const url = `/api/attachments/${attachment.$id}/preview?workspaceId=${workspaceId}`;
 
         // Log storage usage for billing - every byte is billable
         logStorageUsage({

src/features/attachments/server/route.ts

@@ -49,31 +49,26 @@ export const createAttachment = async (data: {
     }
   );
 
-  // Send notifications (non-blocking)
+  // Send notifications (non-blocking) using the new event-driven system
+  // This automatically deduplicates recipients and ignores the triggerer
   try {
+    const { dispatchWorkitemEvent, createAttachmentAddedEvent } = await import("@/lib/notifications");
     const task = await databases.getDocument<Task>(DATABASE_ID, TASKS_ID, data.taskId);
     const uploaderName = data.uploaderName || "Someone";
 
-    // Notify assignees
-    notifyTaskAssignees({
-      databases,
+    const event = createAttachmentAddedEvent(
       task,
-      triggeredByUserId: data.uploadedBy,
-      triggeredByName: uploaderName,
-      notificationType: "task_attachment_added",
-      workspaceId: data.workspaceId,
-    }).catch(() => {});
-
-    // Notify workspace admins
-    notifyWorkspaceAdmins({
-      databases,
-      task,
-      triggeredByUserId: data.uploadedBy,
-      triggeredByName: uploaderName,
-      notificationType: "task_attachment_added",
-      workspaceId: data.workspaceId,
-    }).catch(() => {});
-  } catch {
+      data.uploadedBy,
+      uploaderName,
+      attachment.$id,
+      attachment.name
+    );
+
+    dispatchWorkitemEvent(event).catch((err) => {
+      console.error("[Attachments] Failed to dispatch attachment event:", err);
+    });
+  } catch (err) {
+    console.error("[Attachments] Error preparing notifications:", err);
     // Silently fail - notifications are non-critical
   }
 
@@ -117,32 +112,26 @@ export const deleteAttachment = async (
     attachmentId
   );
 
-  // Send notifications (non-blocking)
+  // Send notifications (non-blocking) using the new event-driven system
   if (deletedBy && taskId) {
     try {
+      const { dispatchWorkitemEvent, createAttachmentDeletedEvent } = await import("@/lib/notifications");
       const task = await databases.getDocument<Task>(DATABASE_ID, TASKS_ID, taskId);
       const userName = deleterName || "Someone";
 
-      // Notify assignees
-      notifyTaskAssignees({
-        databases,
-        task,
-        triggeredByUserId: deletedBy,
-        triggeredByName: userName,
-        notificationType: "task_attachment_deleted",
-        workspaceId,
-      }).catch(() => {});
-
-      // Notify workspace admins
-      notifyWorkspaceAdmins({
-        databases,
+      const event = createAttachmentDeletedEvent(
         task,
-        triggeredByUserId: deletedBy,
-        triggeredByName: userName,
-        notificationType: "task_attachment_deleted",
-        workspaceId,
-      }).catch(() => {});
-    } catch {
+        deletedBy,
+        userName,
+        attachmentId,
+        attachment.name
+      );
+
+      dispatchWorkitemEvent(event).catch((err) => {
+        console.error("[Attachments] Failed to dispatch attachment delete event:", err);
+      });
+    } catch (err) {
+      console.error("[Attachments] Error preparing notifications:", err);
       // Silently fail - notifications are non-critical
     }
   }