From e0c951e758d95721ccddf7a2e857b74d5124fa9f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 17 Apr 2026 18:31:42 +0300
Subject: [PATCH] feat(attachments): display text attachments for file role

---
 apps/client/src/widgets/type_widgets/Attachment.tsx | 7 +++++++
 apps/client/src/widgets/type_widgets/File.tsx       | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/type_widgets/Attachment.tsx b/apps/client/src/widgets/type_widgets/Attachment.tsx
index 381313d6ba..851480dd7f 100644
--- a/apps/client/src/widgets/type_widgets/Attachment.tsx
+++ b/apps/client/src/widgets/type_widgets/Attachment.tsx
@@ -30,6 +30,7 @@ import Icon from "../react/Icon";
 import Modal from "../react/Modal";
 import NoteLink from "../react/NoteLink";
 import { ParentComponent, refToJQuerySelector } from "../react/react_utils";
+import { TextPreview } from "./File";
 import { TextRepresentation } from "./ReadOnlyTextRepresentation";
 import { TypeWidgetProps } from "./type_widget";
 
@@ -144,6 +145,7 @@ export function AttachmentDetail({ note, viewScope }: TypeWidgetProps) {
 function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment, isFullDetail?: boolean }) {
     const contentWrapper = useRef<HTMLDivElement>(null);
     const [ ocrModalShown, setOcrModalShown ] = useState(false);
+    const [ textContent, setTextContent ] = useState<string | null>(null);
     const supportsOcr = attachment.role === "image" || attachment.role === "file";
 
     function refresh() {
@@ -151,6 +153,10 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
             .then(({ $renderedContent }) => {
                 contentWrapper.current?.replaceChildren(...$renderedContent);
             });
+
+        if (attachment.role === "file") {
+            attachment.getBlob().then(blob => setTextContent(blob?.content ?? null));
+        }
     }
 
     useEffect(refresh, [ attachment ]);
@@ -213,6 +219,7 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
                 </div>
 
                 {attachment.utcDateScheduledForErasureSince && <DeletionAlert utcDateScheduledForErasureSince={attachment.utcDateScheduledForErasureSince} />}
+                {textContent && <TextPreview content={textContent} />}
                 <div ref={contentWrapper} className="attachment-content-wrapper" />
             </div>
 
diff --git a/apps/client/src/widgets/type_widgets/File.tsx b/apps/client/src/widgets/type_widgets/File.tsx
index f36ecce854..2fa982a083 100644
--- a/apps/client/src/widgets/type_widgets/File.tsx
+++ b/apps/client/src/widgets/type_widgets/File.tsx
@@ -26,7 +26,7 @@ export default function FileTypeWidget({ note, parentComponent, noteContext }: T
 
 }
 
-function TextPreview({ content }: { content: string }) {
+export function TextPreview({ content }: { content: string }) {
     const trimmedContent = content.substring(0, TEXT_MAX_NUM_CHARS);
     const isTooLarge = trimmedContent.length !== content.length;