Quote attached.
Please confirm.
`, + }); + render({post.post_title}
-{post.post_body}
+{post.post_body}
+요약 (Summary)
diff --git a/frontend/src/PostBody.tsx b/frontend/src/PostBody.tsx new file mode 100644 index 000000000..3ff77b537 --- /dev/null +++ b/frontend/src/PostBody.tsx @@ -0,0 +1,33 @@ +import { splitPostBody, type PostBodySegment } from "./postBodyDisplay"; + +function renderSegment(segment: PostBodySegment, index: number) { + switch (segment.kind) { + case "text": + return ( ++ {segment.text} +
+ ); + case "image": + return ( +{splitPostBody(body).map(renderSegment)}
;
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5fb331302..53f4db2ac 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -8,6 +8,11 @@
--accent-bg: rgba(170, 59, 255, 0.1);
--accent-border: rgba(170, 59, 255, 0.5);
--social-bg: rgba(244, 243, 236, 0.5);
+ --post-body-gap: 0.75rem;
+ --post-image-padding: 0.75rem;
+ --post-image-radius: 8px;
+ --post-image-border: var(--border);
+ --post-image-bg: var(--code-bg);
--shadow:
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
diff --git a/frontend/src/postBodyDisplay.test.ts b/frontend/src/postBodyDisplay.test.ts
new file mode 100644
index 000000000..f3092cea6
--- /dev/null
+++ b/frontend/src/postBodyDisplay.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { splitPostBody } from "./postBodyDisplay";
+
+/** 1x1 transparent PNG — the same synthetic fixture the Python vision tests use. */
+const TINY_PNG_B64 =
+ "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
+
+describe("splitPostBody", () => {
+ it("leaves a plain-text post unchanged so existing popups keep their wording", () => {
+ expect(splitPostBody("The full body text.")).toEqual([
+ { kind: "text", text: "The full body text." },
+ ]);
+ });
+
+ it("keeps comparison operators that look like broken HTML", () => {
+ expect(splitPostBody("qty < 50 and price > 10")).toEqual([
+ { kind: "text", text: "qty < 50 and price > 10" },
+ ]);
+ });
+
+ it("renders a data-URI image as its own segment and never leaks the raw base64 into text", () => {
+ const html =
+ `Quote attached.
Please confirm.
`; + const segments = splitPostBody(html); + + expect(segments).toEqual([ + { kind: "text", text: "Quote attached." }, + { + kind: "image", + src: `data:image/png;base64,${TINY_PNG_B64}`, + mimeType: "image/png", + position: html.indexOf("between
` + + ``;
+ const segments = splitPostBody(html);
+ expect(segments.map((segment) => segment.kind)).toEqual(["image", "text", "image"]);
+ expect(segments[1]).toEqual({ kind: "text", text: "between" });
+ expect(segments[0]?.kind === "image" && segments[0].position).toBe(0);
+ expect(segments[2]?.kind === "image" && segments[2].position).toBeGreaterThan(0);
+ });
+
+ it("tells the operator to re-export when the base64 payload is not decodable", () => {
+ const html = '
';
+ expect(splitPostBody(html)).toEqual([
+ {
+ kind: "text",
+ text: "Embedded image could not be decoded. Re-export the source post and open it again.",
+ },
+ ]);
+ });
+
+ it("does not turn a remote http img into a loaded image", () => {
+ const html = 'See
end
'; + const segments = splitPostBody(html); + expect(segments.every((segment) => segment.kind === "text")).toBe(true); + expect(segments.map((segment) => (segment.kind === "text" ? segment.text : "")).join(" ")).toContain( + "See", + ); + expect(JSON.stringify(segments)).not.toContain("https://example.test"); + }); +}); diff --git a/frontend/src/postBodyDisplay.ts b/frontend/src/postBodyDisplay.ts new file mode 100644 index 000000000..c6ea29fdd --- /dev/null +++ b/frontend/src/postBodyDisplay.ts @@ -0,0 +1,72 @@ +/** + * Split a raw `post_body` into text and in-place data-URI images. + * + * The popup used to dump the source string, so a buyer who opened a post + * with an embedded invoice saw a base64 wall instead of the picture. + * Only `data:image/...;base64,...` payloads are turned into images — + * remote `http(s)` img tags are stripped, never fetched. + */ + +export type PostBodySegment = + | { kind: "text"; text: string } + | { kind: "image"; src: string; mimeType: string; position: number }; + +const DATA_URI_IMG = + /