@anthusai/papyrus 1.0.0-next.6 → 1.0.0-next.7

package/components/markus-ir-preview.tsx

@@ -20,6 +20,7 @@ type PreviewSidecar = {
 type PreviewContext = {
   sidecar: PreviewSidecar;
   citationNumbers: Map<string, number>;
+  imageUrls: Record<string, string>;
 };
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -55,6 +56,19 @@ function imagePlaceholder(token: string, context: PreviewContext): ReactNode {
   const entry = context.sidecar.images[token];
   const src = typeof entry?.src === "string" ? entry.src : "";
   const alt = typeof entry?.alt === "string" ? entry.alt : "";
+  const url = context.imageUrls[src];
+  if (url) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        alt={alt}
+        className="my-3 h-auto max-w-full rounded-lg"
+        data-markus-preview-image-loaded
+        loading="lazy"
+        src={url}
+      />
+    );
+  }
   return (
     <div
       className="my-3 rounded-lg border border-dashed border-border bg-muted/30 px-3 py-6 text-center text-xs text-muted-foreground"
@@ -258,7 +272,13 @@ function renderBlocks(nodes: MarkusNode[], context: PreviewContext): ReactNode[]
   );
 }
 
-export function MarkusIrPreview({ bodyIr }: { bodyIr: unknown }) {
+export function MarkusIrPreview({
+  bodyIr,
+  imageUrls = {},
+}: {
+  bodyIr: unknown;
+  imageUrls?: Record<string, string>;
+}) {
   try {
     const envelope = typeof bodyIr === "string" ? JSON.parse(bodyIr) : bodyIr;
     if (!isRecord(envelope)) throw new Error("bodyIr must be a JSON object");
@@ -267,6 +287,7 @@ export function MarkusIrPreview({ bodyIr }: { bodyIr: unknown }) {
     const context: PreviewContext = {
       sidecar,
       citationNumbers: numberCitationsByFirstAppearance(envelope.document, sidecar),
+      imageUrls,
     };
     return <div data-markus-preview>{renderBlocks(document.children, context)}</div>;
   } catch (error) {

package/components/newsroom-article-editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowLeftIcon, ExternalLinkIcon } from "lucide-react";
+import { ArrowLeftIcon, ExternalLinkIcon, ImagePlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Badge } from "./ui/badge";
@@ -34,6 +34,12 @@ import {
   type ErrorLocation,
   type NewsroomArticleEditorState,
 } from "../lib/newsroom-articles";
+import { resolveMediaBackend } from "../lib/newsroom-media-backend";
+import {
+  insertDirectiveAtSelection,
+  readImageDimensions,
+  uploadArticleImage,
+} from "../lib/newsroom-media";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
 import { SITE_BRAND } from "../lib/site-brand";
 import { cn } from "../lib/utils";
@@ -105,9 +111,14 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
   const [mobileTab, setMobileTab] = useState<MobileTab>("edit");
   const [sections, setSections] = useState<string[]>([]);
   const [reloadToken, setReloadToken] = useState(0);
+  const [imageUrls, setImageUrls] = useState<Record<string, string>>({});
+  const [imageUploading, setImageUploading] = useState(false);
+  const [imageError, setImageError] = useState<string | null>(null);
 
   const frontMatterRef = useRef<HTMLTextAreaElement | null>(null);
   const bodyRef = useRef<HTMLTextAreaElement | null>(null);
+  const imageInputRef = useRef<HTMLInputElement | null>(null);
+  const mediaBackend = useMemo(() => resolveMediaBackend(demo), [demo]);
   const validationSequence = useRef(0);
 
   useEffect(() => {
@@ -147,6 +158,33 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
     };
   }, [backend, blocked]);
 
+  const savedItemId = editor?.id ?? null;
+  useEffect(() => {
+    if (blocked || savedItemId === null) return;
+    let cancelled = false;
+    mediaBackend
+      .listMediaAssets(savedItemId)
+      .then(async (assets) => {
+        const entries = await Promise.all(
+          assets.map(async (asset) => {
+            if (!asset.srcPath || !asset.storagePath) return null;
+            try {
+              return [asset.srcPath, await mediaBackend.imageUrl(asset.storagePath)] as const;
+            } catch {
+              return null;
+            }
+          }),
+        );
+        if (cancelled) return;
+        const loaded = Object.fromEntries(entries.filter((entry) => entry !== null));
+        setImageUrls((current) => ({ ...loaded, ...current }));
+      })
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
+  }, [blocked, mediaBackend, savedItemId]);
+
   const frontMatterYaml = editor?.frontMatterYaml ?? null;
   const bodyMarkus = editor?.bodyMarkus ?? null;
 
@@ -207,6 +245,35 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
     }, 0);
   };
 
+  const insertImage = async (file: File) => {
+    if (!editor || editor.id === null) return;
+    setImageUploading(true);
+    setImageError(null);
+    try {
+      const uploaded = await uploadArticleImage(mediaBackend, readImageDimensions, {
+        itemId: editor.id,
+        slug: editor.slug,
+        file,
+      });
+      const textarea = bodyRef.current;
+      const start = textarea?.selectionStart ?? editor.bodyMarkus.length;
+      const end = textarea?.selectionEnd ?? editor.bodyMarkus.length;
+      const inserted = insertDirectiveAtSelection(editor.bodyMarkus, start, end, uploaded.directive);
+      setImageUrls((current) => ({ ...current, [uploaded.srcPath]: uploaded.imageUrl }));
+      patchEditor({ bodyMarkus: inserted.body });
+      window.setTimeout(() => {
+        const target = bodyRef.current;
+        if (!target) return;
+        target.focus();
+        target.setSelectionRange(inserted.altSelectionStart, inserted.altSelectionStart);
+      }, 0);
+    } catch (error) {
+      setImageError(failureMessage(error));
+    } finally {
+      setImageUploading(false);
+    }
+  };
+
   const saveDraft = useCallback(async (): Promise<string | null> => {
     if (!editor) return null;
     setBusy("save");
@@ -517,18 +584,55 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
                 />
               </label>
 
-              <label className="block space-y-1 text-sm font-medium">
-                <span>Body (Markus)</span>
+              <div className="space-y-1 text-sm font-medium">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                  <label htmlFor="newsroom-article-body">Body (Markus)</label>
+                  <Button
+                    data-newsroom-article-insert-image
+                    disabled={editor.id === null || imageUploading || busy !== null}
+                    onClick={() => imageInputRef.current?.click()}
+                    size="xs"
+                    type="button"
+                    variant="outline"
+                  >
+                    {imageUploading ? <Spinner /> : <ImagePlusIcon aria-hidden="true" />}
+                    Insert image
+                  </Button>
+                  <input
+                    accept="image/*"
+                    aria-label="Image file"
+                    className="hidden"
+                    data-newsroom-article-image-input
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      event.target.value = "";
+                      if (file) void insertImage(file);
+                    }}
+                    ref={imageInputRef}
+                    type="file"
+                  />
+                </div>
+                {editor.id === null ? (
+                  <p className="text-xs font-normal text-muted-foreground" data-newsroom-article-image-hint>
+                    Save the draft once to enable image upload.
+                  </p>
+                ) : null}
+                {imageError ? (
+                  <p className="text-xs font-normal text-destructive" data-newsroom-article-image-error role="alert">
+                    {imageError}
+                  </p>
+                ) : null}
                 <Textarea
                   className={TEXTAREA_CLASS}
                   data-newsroom-article-body
+                  id="newsroom-article-body"
                   onChange={(event) => patchEditor({ bodyMarkus: event.target.value })}
                   ref={bodyRef}
                   rows={28}
                   spellCheck={false}
                   value={editor.bodyMarkus}
                 />
-              </label>
+              </div>
 
               {validation.status === "unavailable" ? (
                 <NewsroomOpsStatusBanner tone="error">{validation.message}</NewsroomOpsStatusBanner>
@@ -574,7 +678,7 @@ export function NewsroomArticleEditor({ articleId, demo }: { articleId: string;
                   <p className="mb-2 text-xs text-muted-foreground">Showing the last valid version.</p>
                 ) : null}
                 {bodyIr ? (
-                  <MarkusIrPreview bodyIr={bodyIr} />
+                  <MarkusIrPreview bodyIr={bodyIr} imageUrls={imageUrls} />
                 ) : (
                   <p className="text-sm text-muted-foreground">
                     {invalid ? "Fix the errors to see a preview." : "The preview appears once the markup is valid."}

package/lib/content-actions-demo.ts

@@ -22,7 +22,15 @@ function titleFromYaml(frontMatterYaml: string | null, fallback: string): string
   return fallback;
 }
 
+const DEMO_IMAGE_DIRECTIVE = /^::image\{([^}]*)\}$/;
+
+function demoAttribute(attributes: string, name: string): string {
+  const match = new RegExp(`${name}="([^"]*)"`).exec(attributes);
+  return match ? match[1] : "";
+}
+
 function demoEnvelope(bodyMarkus: string) {
+  const images: Record<string, Record<string, unknown>> = {};
   const children = bodyMarkus
     .split(/\n{2,}/)
     .map((block) => block.trim())
@@ -32,13 +40,23 @@ function demoEnvelope(bodyMarkus: string) {
       if (heading) {
         return { type: "heading", level: heading[1].length, inline: [{ type: "text", text: heading[2] }], line: null };
       }
+      const image = DEMO_IMAGE_DIRECTIVE.exec(block);
+      if (image) {
+        const token = `PAPYRUSMARKUP${String(Object.keys(images).length + 1).padStart(5, "0")}END`;
+        images[token] = {
+          src: demoAttribute(image[1], "src"),
+          alt: demoAttribute(image[1], "alt"),
+          layout: demoAttribute(image[1], "layout") || null,
+        };
+        return { type: "paragraph", inline: [{ type: "text", text: token }], line: null };
+      }
       return { type: "paragraph", inline: [{ type: "text", text: block }], line: null };
     });
   return {
     schemaVersion: 1,
     markus: { version: "demo", irSchemaVersion: 1 },
     document: { type: "document", schema_version: 1, front_matter: {}, children },
-    papyrus: { images: {}, citations: {}, citationLists: {}, entries: {}, bibliography: [] },
+    papyrus: { images, citations: {}, citationLists: {}, entries: {}, bibliography: [] },
   };
 }
 

package/lib/newsroom-media-backend.ts

@@ -0,0 +1,142 @@
+import { generateClient } from "aws-amplify/data";
+import { getUrl, uploadData } from "aws-amplify/storage";
+import type { Schema } from "../amplify/data/resource";
+import type { MediaAssetFields, MediaAssetRecord, NewsroomMediaBackend } from "./newsroom-media";
+
+type MediaListPage = {
+  data?: (Record<string, unknown> | null)[] | null;
+  nextToken?: string | null;
+  errors?: { message?: string }[] | null;
+};
+
+export type MediaDataClient = {
+  models: {
+    MediaAsset: {
+      create: (
+        input: MediaAssetFields,
+        options: { authMode: "userPool" },
+      ) => Promise<{ errors?: { message?: string }[] | null }>;
+      listMediaAssetsByItemAndSortKey: (
+        input: { itemId: string },
+        options: { authMode: "userPool"; nextToken?: string | null; limit?: number },
+      ) => Promise<MediaListPage>;
+    };
+  };
+};
+
+export type MediaStorageApi = {
+  upload: (input: { path: string; data: Blob; contentType: string }) => Promise<void>;
+  signedUrl: (path: string) => Promise<string>;
+};
+
+function failOnErrors(errors: { message?: string }[] | null | undefined): void {
+  if (errors && errors.length > 0) {
+    throw new Error(errors.map((error) => error.message ?? "GraphQL error").join("; "));
+  }
+}
+
+function srcPathFromMetadata(metadata: unknown): string | null {
+  let parsed = metadata;
+  if (typeof metadata === "string") {
+    try {
+      parsed = JSON.parse(metadata);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof parsed !== "object" || parsed === null) return null;
+  const srcPath = (parsed as Record<string, unknown>).srcPath;
+  return typeof srcPath === "string" ? srcPath : null;
+}
+
+export function createMediaBackend(client: () => MediaDataClient, storage: MediaStorageApi): NewsroomMediaBackend {
+  return {
+    uploadImage: ({ storagePath, data, contentType }) =>
+      storage.upload({ path: storagePath, data, contentType }),
+    async createMediaAsset(fields) {
+      const response = await client().models.MediaAsset.create(fields, { authMode: "userPool" });
+      failOnErrors(response.errors);
+    },
+    async listMediaAssets(itemId) {
+      const records: MediaAssetRecord[] = [];
+      let nextToken: string | null | undefined = null;
+      do {
+        const page: MediaListPage = await client().models.MediaAsset.listMediaAssetsByItemAndSortKey(
+          { itemId },
+          { authMode: "userPool", nextToken, limit: 500 },
+        );
+        failOnErrors(page.errors);
+        for (const row of page.data ?? []) {
+          if (!row) continue;
+          records.push({
+            id: String(row.id),
+            sortKey: String(row.sortKey),
+            storagePath: typeof row.storagePath === "string" ? row.storagePath : null,
+            alt: typeof row.alt === "string" ? row.alt : "",
+            srcPath: srcPathFromMetadata(row.metadata),
+          });
+        }
+        nextToken = page.nextToken;
+      } while (nextToken);
+      return records;
+    },
+    imageUrl: (storagePath) => storage.signedUrl(storagePath),
+  };
+}
+
+const amplifyStorage: MediaStorageApi = {
+  async upload({ path, data, contentType }) {
+    await uploadData({ path, data, options: { contentType } }).result;
+  },
+  async signedUrl(path) {
+    const { url } = await getUrl({ path });
+    return url.toString();
+  },
+};
+
+export function createLiveMediaBackend(): NewsroomMediaBackend {
+  let client: MediaDataClient | null = null;
+  return createMediaBackend(() => {
+    if (!client) client = generateClient<Schema>() as unknown as MediaDataClient;
+    return client;
+  }, amplifyStorage);
+}
+
+export function createDemoMediaBackend(): NewsroomMediaBackend {
+  const objects = new Map<string, Blob>();
+  const rows = new Map<string, MediaAssetFields[]>();
+  return {
+    async uploadImage({ storagePath, data }) {
+      objects.set(storagePath, data);
+    },
+    async createMediaAsset(fields) {
+      rows.set(fields.itemId, [...(rows.get(fields.itemId) ?? []), fields]);
+    },
+    async listMediaAssets(itemId) {
+      return (rows.get(itemId) ?? []).map((fields) => ({
+        id: fields.id,
+        sortKey: fields.sortKey,
+        storagePath: fields.storagePath,
+        alt: fields.alt,
+        srcPath: srcPathFromMetadata(fields.metadata),
+      }));
+    },
+    async imageUrl(storagePath) {
+      const object = objects.get(storagePath);
+      if (!object) throw new Error(`No demo object at ${storagePath}.`);
+      return URL.createObjectURL(object);
+    },
+  };
+}
+
+let liveBackend: NewsroomMediaBackend | null = null;
+let demoBackend: NewsroomMediaBackend | null = null;
+
+export function resolveMediaBackend(demo: boolean): NewsroomMediaBackend {
+  if (demo) {
+    demoBackend ??= createDemoMediaBackend();
+    return demoBackend;
+  }
+  liveBackend ??= createLiveMediaBackend();
+  return liveBackend;
+}

package/lib/newsroom-media.ts

@@ -0,0 +1,182 @@
+export const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+
+export const IMAGE_CONTENT_TYPES: Record<string, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  svg: "image/svg+xml",
+};
+
+export type ImageFileLike = { name: string; size: number };
+
+function extensionOf(filename: string): string {
+  const dot = filename.lastIndexOf(".");
+  return dot === -1 ? "" : filename.slice(dot + 1).toLowerCase();
+}
+
+export function contentTypeForFilename(filename: string): string | null {
+  return IMAGE_CONTENT_TYPES[extensionOf(filename)] ?? null;
+}
+
+export function isSvgFilename(filename: string): boolean {
+  return extensionOf(filename) === "svg";
+}
+
+function sanitizeSegment(value: string): string {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9._-]+/g, "-")
+    .replace(/-{2,}/g, "-")
+    .replace(/^[-.]+|-+$/g, "");
+}
+
+export function srcPathFor(slug: string, filename: string, existingSrcPaths: Iterable<string> = []): string {
+  const taken = new Set(existingSrcPaths);
+  const extension = sanitizeSegment(extensionOf(filename));
+  const dot = filename.lastIndexOf(".");
+  const rawStem = dot === -1 ? filename : filename.slice(0, dot);
+  const stem = sanitizeSegment(rawStem) || "image";
+  const directory = sanitizeSegment(slug) || "article";
+  const suffix = extension ? `.${extension}` : "";
+  let candidate = `assets/${directory}/${stem}${suffix}`;
+  for (let counter = 2; taken.has(candidate); counter += 1) {
+    candidate = `assets/${directory}/${stem}-${counter}${suffix}`;
+  }
+  return candidate;
+}
+
+export async function sha256Hex(data: string | ArrayBuffer): Promise<string> {
+  const bytes = typeof data === "string" ? new TextEncoder().encode(data) : data;
+  const digest = await crypto.subtle.digest("SHA-256", bytes);
+  return Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+export async function mediaIdFor(itemId: string, srcPath: string): Promise<string> {
+  return `media-${itemId}-${(await sha256Hex(srcPath)).slice(0, 10)}`;
+}
+
+export function validateImageFile(file: ImageFileLike): string | null {
+  if (contentTypeForFilename(file.name) === null) {
+    return "Choose a PNG, JPEG, GIF, WebP, AVIF or SVG image.";
+  }
+  if (file.size <= 0) return "That file is empty.";
+  if (file.size > MAX_IMAGE_BYTES) return "Images can be at most 10 MB.";
+  return null;
+}
+
+function altAttributeValue(alt: string): string {
+  return alt.replace(/[\r\n]+/g, " ").replace(/"/g, "'").replace(/[{}]/g, "");
+}
+
+export function imageDirective(srcPath: string, alt: string): string {
+  return `::image{src="${srcPath}" alt="${altAttributeValue(alt)}" layout="inline"}`;
+}
+
+export type MediaAssetFields = {
+  id: string;
+  itemId: string;
+  type: "image";
+  role: "body";
+  sortKey: string;
+  storagePath: string;
+  alt: string;
+  width?: number;
+  height?: number;
+  metadata: string;
+};
+
+export function mediaSortKey(position: number, srcPath: string): string {
+  return `${String(position).padStart(3, "0")}#${srcPath}`;
+}
+
+export type SelectionInsertion = { body: string; altSelectionStart: number };
+
+function countEdgeNewlines(text: string, fromEnd: boolean): number {
+  let count = 0;
+  while (count < 2 && (fromEnd ? text[text.length - 1 - count] : text[count]) === "\n") count += 1;
+  return count;
+}
+
+export function insertDirectiveAtSelection(
+  body: string,
+  selectionStart: number,
+  selectionEnd: number,
+  directive: string,
+): SelectionInsertion {
+  const before = body.slice(0, selectionStart);
+  const after = body.slice(selectionEnd);
+  const prefix = before === "" ? "" : "\n".repeat(2 - countEdgeNewlines(before, true));
+  const suffix = after === "" ? "\n" : "\n".repeat(2 - countEdgeNewlines(after, false));
+  const directiveStart = before.length + prefix.length;
+  return {
+    body: `${before}${prefix}${directive}${suffix}${after}`,
+    altSelectionStart: directiveStart + directive.indexOf('alt="') + 'alt="'.length,
+  };
+}
+
+export type MediaAssetRecord = {
+  id: string;
+  sortKey: string;
+  storagePath: string | null;
+  alt: string;
+  srcPath: string | null;
+};
+
+export type NewsroomMediaBackend = {
+  uploadImage: (input: { storagePath: string; data: Blob; contentType: string }) => Promise<void>;
+  createMediaAsset: (fields: MediaAssetFields) => Promise<void>;
+  listMediaAssets: (itemId: string) => Promise<MediaAssetRecord[]>;
+  imageUrl: (storagePath: string) => Promise<string>;
+};
+
+export type ImageDimensionReader = (file: Blob, filename: string) => Promise<{ width: number; height: number } | null>;
+
+export type UploadedImage = { srcPath: string; directive: string; imageUrl: string };
+
+export async function uploadArticleImage(
+  backend: NewsroomMediaBackend,
+  readDimensions: ImageDimensionReader,
+  input: { itemId: string; slug: string; file: File },
+): Promise<UploadedImage> {
+  const problem = validateImageFile(input.file);
+  if (problem) throw new Error(problem);
+  const contentType = contentTypeForFilename(input.file.name) as string;
+  const existing = await backend.listMediaAssets(input.itemId);
+  const srcPath = srcPathFor(
+    input.slug,
+    input.file.name,
+    existing.map((asset) => asset.srcPath).filter((path): path is string => path !== null),
+  );
+  const bytes = await input.file.arrayBuffer();
+  const sha256 = await sha256Hex(bytes);
+  const dimensions = await readDimensions(input.file, input.file.name);
+  const storagePath = `media/${srcPath}`;
+  await backend.uploadImage({ storagePath, data: input.file, contentType });
+  await backend.createMediaAsset({
+    id: await mediaIdFor(input.itemId, srcPath),
+    itemId: input.itemId,
+    type: "image",
+    role: "body",
+    sortKey: mediaSortKey(existing.length + 1, srcPath),
+    storagePath,
+    alt: input.file.name,
+    ...(dimensions ?? {}),
+    metadata: JSON.stringify({ srcPath, sha256, bytes: bytes.byteLength, contentType }),
+  });
+  return { srcPath, directive: imageDirective(srcPath, ""), imageUrl: await backend.imageUrl(storagePath) };
+}
+
+export async function readImageDimensions(file: Blob, filename: string): Promise<{ width: number; height: number } | null> {
+  if (isSvgFilename(filename)) return null;
+  try {
+    const bitmap = await createImageBitmap(file);
+    const size = { width: bitmap.width, height: bitmap.height };
+    bitmap.close();
+    return size;
+  } catch {
+    return null;
+  }
+}

package/package.json

@@ -167,6 +167,8 @@
     "./lib/newsroom-index-filters": "./lib/newsroom-index-filters.ts",
     "./lib/newsroom-knowledge-query-request": "./lib/newsroom-knowledge-query-request.ts",
     "./lib/newsroom-list-selection": "./lib/newsroom-list-selection.ts",
+    "./lib/newsroom-media-backend": "./lib/newsroom-media-backend.ts",
+    "./lib/newsroom-media": "./lib/newsroom-media.ts",
     "./lib/newsroom-nav": "./lib/newsroom-nav.ts",
     "./lib/newsroom-references": "./lib/newsroom-references.ts",
     "./lib/newsroom-sections": "./lib/newsroom-sections.ts",
@@ -274,7 +276,7 @@
       "optional": true
     }
   },
-  "version": "1.0.0-next.6",
+  "version": "1.0.0-next.7",
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.7.3",
     "@aws-sdk/client-cognito-identity-provider": "3.1045.0",

package/routes.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-next.6",
+  "version": "1.0.0-next.7",
   "routes": [
     {
       "file": "app/%5F_preview/[[...path]]/route.ts",