preview attachment

2026-07-16 14:41:54 +08:00
parent b4be5b14de
commit f592ecafed
1 changed files with 24 additions and 1 deletions
@@ -1,6 +1,7 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getNodeByKey, type NodeKey } from 'lexical';
 import { X } from 'lucide-react';
+import { useEffect, useState } from 'react';

 import type { HomeAttachmentDraft } from '../../useHomeDraftStore';

@@ -12,8 +13,30 @@ export function AttachmentToken({
  nodeKey: NodeKey;
 }) {
  const [editor] = useLexicalComposerContext();
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!attachment.file.type.startsWith('image/')) {
+      setPreviewUrl(null);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(attachment.file);
+    setPreviewUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [attachment.file]);
+
  return (
-    <span className="mx-0.75 inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-(--platform-subpanel-border) bg-(--platform-neutral-bg) px-1.75 align-middle text-[11px] text-(--platform-neutral-text)">
+    <span className="group/attachment relative mx-0.75 inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-(--platform-subpanel-border) bg-(--platform-neutral-bg) px-1.75 align-middle text-[11px] text-(--platform-neutral-text)">
+      {previewUrl ? (
+        <span className="pointer-events-none absolute bottom-[calc(100%+6px)] left-1/2 z-20 hidden max-h-60 w-max max-w-60 -translate-x-1/2 overflow-hidden rounded-[7px] border border-(--platform-subpanel-border) bg-(--platform-neutral-bg) p-1 shadow-lg group-hover/attachment:block group-focus-within/attachment:block">
+          <img
+            className="block max-h-56 max-w-56 object-contain"
+            src={previewUrl}
+            alt={attachment.file.name}
+          />
+        </span>
+      ) : null}
      {attachment.file.name}
      <button
        className="grid size-4.5 cursor-pointer place-items-center border-0 bg-transparent p-0 text-(--platform-text-soft)"