feat: Improved placeholder and upload handling for attachments

apps/client/src/features/editor/components/attachment/attachment-view.tsx

@@ -1,5 +1,5 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { Group, Text, Paper, ActionIcon } from "@mantine/core";
+import { Group, Text, Paper, ActionIcon, Loader } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
 import { IconDownload, IconPaperclip } from "@tabler/icons-react";
 import { useHover } from "@mantine/hooks";
@@ -21,10 +21,10 @@ export default function AttachmentView(props: NodeViewProps) {
           h={25}
         >
           <Group justify="space-between" wrap="nowrap">
-            <IconPaperclip size={20} />
+            {url ? <IconPaperclip size={20} /> : <Loader size={20} />}
 
             <Text component="span" size="md" truncate="end">
-              {name}
+              {url ? name : `Uploading ${name}...`}
             </Text>
 
             <Text component="span" size="sm" c="dimmed" inline>
@@ -32,14 +32,12 @@ export default function AttachmentView(props: NodeViewProps) {
             </Text>
           </Group>
 
-          {selected || hovered ? (
+          {url && (selected || hovered) && (
             <a href={getFileUrl(url)} target="_blank">
               <ActionIcon variant="default" aria-label="download file">
                 <IconDownload size={18} />
               </ActionIcon>
             </a>
-          ) : (
-            ""
           )}
         </Group>
       </Paper>

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -237,6 +237,9 @@ const CommandGroups: SlashMenuGroupedItemsType = {
             const pos = editor.view.state.selection.from;
             uploadAttachmentAction(file, editor.view, pos, pageId, true);
           }
+
+          // Reset the input value to allow uploading the same file again if needed
+          input.value = "";
         };
         input.click();
       },