@anthusai/papyrus 2.0.3 → 3.1.0

package/components/editorial-preview-popover.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { SparklesIcon, XIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import type { EditorialFinding, Span } from "../lib/editorial-checks";
+import { EditorialFindingCard, RewriteOptions, useRewriteOptions, type FindingActions } from "./editorial-finding-card";
+
+/** What the popover is about: findings at a marked passage, or a passage the editor selected. */
+export type PreviewPopoverTarget =
+  | { kind: "findings"; findingIds: string[]; anchor: DOMRect }
+  | { kind: "selection"; source: Span; anchor: DOMRect };
+
+const WIDTH = 352;
+
+/**
+ * Floats next to the passage on the preview, inside `container` (which must be
+ * positioned). Escape or the close button dismisses it.
+ */
+export function EditorialPreviewPopover({
+  target,
+  findings,
+  body,
+  container,
+  actions,
+  onClose,
+}: {
+  target: PreviewPopoverTarget;
+  findings: EditorialFinding[];
+  body: string;
+  container: HTMLElement | null;
+  actions: FindingActions;
+  onClose: () => void;
+}) {
+  const [note, setNote] = useState("");
+  const panel = useRef<HTMLDivElement | null>(null);
+  const selectionRewrites = useRewriteOptions(actions);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  useEffect(() => {
+    panel.current?.focus();
+  }, [target]);
+
+  const box = container?.getBoundingClientRect();
+  const top = box ? target.anchor.bottom - box.top + container!.scrollTop + 6 : 0;
+  const left = box ? Math.max(0, Math.min(target.anchor.left - box.left, box.width - WIDTH)) : 0;
+  const shown = target.kind === "findings" ? findings.filter((finding) => target.findingIds.includes(finding.id)) : [];
+
+  return (
+    <div
+      aria-label={target.kind === "findings" ? "Editorial findings for this passage" : "Rewrite the selected passage"}
+      className="absolute z-20 max-h-[28rem] space-y-2 overflow-auto rounded-xl border border-border bg-popover p-3 text-sm text-popover-foreground shadow-lg outline-none"
+      data-editorial-preview-popover={target.kind}
+      ref={panel}
+      role="dialog"
+      style={{ top, left, width: WIDTH }}
+      tabIndex={-1}
+    >
+      <div className="flex items-center gap-2">
+        <Input
+          aria-label="Note for rewrites"
+          className="h-8 flex-1"
+          onChange={(event) => setNote(event.target.value)}
+          placeholder="Note for rewrites, e.g. shorter"
+          value={note}
+        />
+        <Button aria-label="Close" onClick={onClose} size="icon-xs" type="button" variant="ghost">
+          <XIcon aria-hidden="true" />
+        </Button>
+      </div>
+      {target.kind === "findings" ? (
+        shown.length ? (
+          shown.map((finding) => <EditorialFindingCard actions={actions} active finding={finding} key={finding.id} note={note} />)
+        ) : (
+          <p className="text-muted-foreground">This finding was resolved.</p>
+        )
+      ) : (
+        <div className="space-y-2" data-editorial-selection-rewrite>
+          <q className="block text-muted-foreground">{body.slice(target.source.start, target.source.end)}</q>
+          <Button
+            data-editorial-rewrite-selection
+            onClick={() => {
+              void selectionRewrites.request({ selection: target.source }, note.trim() || null);
+            }}
+            size="xs"
+            type="button"
+          >
+            <SparklesIcon aria-hidden="true" /> Suggest rewrites
+          </Button>
+          <RewriteOptions finding={null} onApply={actions.onApply} suggestion={selectionRewrites.suggestion} />
+        </div>
+      )}
+    </div>
+  );
+}

package/components/markus-body-editor.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { markdown } from "@codemirror/lang-markdown";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorState, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView, keymap, placeholder as placeholderExtension } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import type { EditorialFinding } from "../lib/editorial-checks";
+
+/** The textarea-shaped surface the article editor already drives (focus, selection, value). */
+export type MarkusBodyEditorHandle = {
+  readonly value: string;
+  readonly selectionStart: number;
+  readonly selectionEnd: number;
+  focus: () => void;
+  setSelectionRange: (start: number, end: number) => void;
+  /** Scroll to and select a span, e.g. a finding the editor clicked in the findings panel. */
+  reveal: (start: number, end: number) => void;
+};
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  findings?: EditorialFinding[];
+  activeFindingId?: string | null;
+  onFindingClick?: (findingId: string) => void;
+  onSelectionChange?: (selection: { start: number; end: number }) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+};
+
+type MarkedFinding = Pick<EditorialFinding, "id" | "span" | "severity" | "status" | "message">;
+
+/** Markup is told apart by weight, emphasis and opacity, never by a fixed colour, so it reads in light and dark themes. */
+const markusHighlight = HighlightStyle.define([
+  { tag: tags.heading, fontWeight: "700" },
+  { tag: tags.strong, fontWeight: "700" },
+  { tag: tags.emphasis, fontStyle: "italic" },
+  { tag: tags.strikethrough, textDecoration: "line-through" },
+  { tag: tags.link, textDecoration: "underline" },
+  { tag: [tags.url, tags.processingInstruction, tags.meta, tags.contentSeparator, tags.labelName], opacity: "0.6" },
+  { tag: tags.monospace, opacity: "0.85" },
+  { tag: tags.quote, fontStyle: "italic", opacity: "0.85" },
+]);
+
+const setFindings = StateEffect.define<{ findings: MarkedFinding[]; activeId: string | null }>();
+
+function decorationsFor(findings: MarkedFinding[], activeId: string | null, length: number): DecorationSet {
+  const builder = new RangeSetBuilder<Decoration>();
+  const sorted = [...findings]
+    .filter((finding) => finding.span.start < finding.span.end && finding.span.end <= length)
+    .sort((a, b) => a.span.start - b.span.start || a.span.end - b.span.end);
+  for (const finding of sorted) {
+    builder.add(
+      finding.span.start,
+      finding.span.end,
+      Decoration.mark({
+        class: [
+          "cm-editorial-finding",
+          `cm-editorial-${finding.severity}`,
+          `cm-editorial-${finding.status}`,
+          finding.id === activeId ? "cm-editorial-active" : "",
+        ].join(" "),
+        attributes: { "data-editorial-finding": finding.id, title: finding.message },
+      }),
+    );
+  }
+  return builder.finish();
+}
+
+/** Findings are drawn as marks; edits move them with the text until the next check replaces them. */
+const findingField = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update(marks, transaction) {
+    let next = marks.map(transaction.changes);
+    for (const effect of transaction.effects) {
+      if (effect.is(setFindings)) next = decorationsFor(effect.value.findings, effect.value.activeId, transaction.state.doc.length);
+    }
+    return next;
+  },
+  provide: (field) => EditorView.decorations.from(field),
+});
+
+const theme = EditorView.theme({
+  "&": { fontSize: "0.875rem", border: "1px solid var(--border)", borderRadius: "0.5rem", backgroundColor: "var(--background)", color: "var(--foreground)" },
+  ".cm-cursor": { borderLeftColor: "var(--foreground)" },
+  "&.cm-focused": { outline: "2px solid var(--ring)", outlineOffset: "1px" },
+  ".cm-content": { fontFamily: "var(--font-mono, ui-monospace, monospace)", minHeight: "28rem", padding: "0.75rem 0" },
+  ".cm-line": { padding: "0 0.75rem" },
+  ".cm-editorial-finding": { textDecorationLine: "underline", textDecorationStyle: "wavy", textUnderlineOffset: "3px", cursor: "pointer" },
+  ".cm-editorial-error": { textDecorationColor: "var(--destructive)" },
+  ".cm-editorial-warn": { textDecorationColor: "oklch(0.75 0.16 70)" },
+  ".cm-editorial-info": { textDecorationColor: "oklch(0.65 0.12 250)" },
+  ".cm-editorial-review": { textDecorationStyle: "dotted" },
+  ".cm-editorial-active": { backgroundColor: "color-mix(in oklch, var(--ring) 22%, transparent)" },
+});
+
+/** Replace only the stretch that differs, so finding marks elsewhere keep their place. */
+export function minimalChange(before: string, after: string): { from: number; to: number; insert: string } {
+  let prefix = 0;
+  const limit = Math.min(before.length, after.length);
+  while (prefix < limit && before.charCodeAt(prefix) === after.charCodeAt(prefix)) prefix += 1;
+  let suffix = 0;
+  while (
+    suffix < limit - prefix &&
+    before.charCodeAt(before.length - 1 - suffix) === after.charCodeAt(after.length - 1 - suffix)
+  ) suffix += 1;
+  return { from: prefix, to: before.length - suffix, insert: after.slice(prefix, after.length - suffix) };
+}
+
+export const MarkusBodyEditor = forwardRef<MarkusBodyEditorHandle, Props>(function MarkusBodyEditor(
+  { value, onChange, findings = [], activeFindingId = null, onFindingClick, onSelectionChange, placeholder, ariaLabel = "Body" },
+  ref,
+) {
+  const host = useRef<HTMLDivElement | null>(null);
+  const view = useRef<EditorView | null>(null);
+  const callbacks = useRef({ onChange, onFindingClick, onSelectionChange });
+  callbacks.current = { onChange, onFindingClick, onSelectionChange };
+
+  useEffect(() => {
+    if (!host.current) return;
+    const editor = new EditorView({
+      parent: host.current,
+      state: EditorState.create({
+        doc: value,
+        extensions: [
+          history(),
+          keymap.of([...defaultKeymap, ...historyKeymap]),
+          markdown(),
+          syntaxHighlighting(markusHighlight),
+          EditorView.lineWrapping,
+          findingField,
+          theme,
+          placeholder ? placeholderExtension(placeholder) : [],
+          EditorView.contentAttributes.of({
+            "aria-label": ariaLabel,
+            "aria-multiline": "true",
+            "data-newsroom-article-body": "",
+            id: "newsroom-article-body",
+            spellcheck: "false",
+          }),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) callbacks.current.onChange(update.state.doc.toString());
+            if (update.selectionSet || update.docChanged) {
+              const main = update.state.selection.main;
+              callbacks.current.onSelectionChange?.({ start: main.from, end: main.to });
+            }
+          }),
+          EditorView.domEventHandlers({
+            click(event) {
+              const mark = (event.target as HTMLElement | null)?.closest("[data-editorial-finding]");
+              const id = mark?.getAttribute("data-editorial-finding");
+              if (id) callbacks.current.onFindingClick?.(id);
+              return false;
+            },
+          }),
+        ],
+      }),
+    });
+    view.current = editor;
+    // Browser specs read the document through the host element (CodeMirror only renders visible lines).
+    (host.current as HTMLDivElement & { papyrusEditorValue?: () => string }).papyrusEditorValue = () => editor.state.doc.toString();
+    return () => {
+      editor.destroy();
+      view.current = null;
+    };
+    // The editor is created once; `value` changes are synced below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const editor = view.current;
+    if (!editor) return;
+    const current = editor.state.doc.toString();
+    if (current !== value) editor.dispatch({ changes: minimalChange(current, value) });
+  }, [value]);
+
+  useEffect(() => {
+    view.current?.dispatch({ effects: setFindings.of({ findings, activeId: activeFindingId }) });
+  }, [findings, activeFindingId]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      get value() {
+        return view.current?.state.doc.toString() ?? value;
+      },
+      get selectionStart() {
+        return view.current?.state.selection.main.from ?? 0;
+      },
+      get selectionEnd() {
+        return view.current?.state.selection.main.to ?? 0;
+      },
+      focus() {
+        view.current?.focus();
+      },
+      setSelectionRange(start: number, end: number) {
+        view.current?.dispatch({ selection: { anchor: start, head: end }, scrollIntoView: true });
+      },
+      reveal(start: number, end: number) {
+        const editor = view.current;
+        if (!editor) return;
+        editor.dispatch({ selection: { anchor: start, head: end }, effects: EditorView.scrollIntoView(start, { y: "center" }) });
+        editor.focus();
+      },
+    }),
+    [value],
+  );
+
+  return <div data-newsroom-article-body-editor ref={host} />;
+});

package/components/markus-ir-preview.tsx

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import type { MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import { CITATION_TOKEN, planPreview, selectionToSource, splitByMarks, type BlockAnnotation, type PreviewMark, type PreviewPlan } from "../lib/editorial-preview";
+import type { EditorialCheckResult, EditorialFinding, Span } from "../lib/editorial-checks";
 import {
   parseMarkusDocument,
   type MarkusBlock,
@@ -17,7 +19,20 @@ type PreviewSidecar = {
   bibliography: string[];
 };
 
+/** Editorial findings drawn on the preview (see lib/editorial-preview.ts). */
+export type PreviewEditorial = {
+  /** A check result computed for the same body the preview shows, and the findings to draw from it. */
+  result: EditorialCheckResult;
+  findings: EditorialFinding[];
+  activeFindingIds?: readonly string[];
+  /** A marked passage was clicked. */
+  onOpenMark: (findingIds: string[], anchor: HTMLElement) => void;
+  /** Text was selected inside one prose block: the source span of the sentences it touches. */
+  onSelectSource?: (source: Span, anchor: DOMRect) => void;
+};
+
 type PreviewContext = {
+  editorial?: PreviewEditorial & { plan: PreviewPlan; blocks: Map<string, BlockAnnotation> };
   sidecar: PreviewSidecar;
   citationNumbers: Map<string, number>;
   imageUrls: Record<string, string>;
@@ -91,7 +106,7 @@ function renderText(text: string, context: PreviewContext): ReactNode {
     if (!keys) continue;
     if (index > cursor) parts.push(text.slice(cursor, index));
     parts.push(
-      <sup className="text-primary" key={`${index}-${token}`}>
+      <sup className="text-primary" data-editorial-skip key={`${index}-${token}`}>
         {keys.map((key) => `[${context.citationNumbers.get(key)}]`).join("")}
       </sup>,
     );
@@ -127,7 +142,7 @@ function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactN
       }
       case "image":
         return (
-          <span className="rounded border border-dashed border-border px-1 text-xs text-muted-foreground" key={index}>
+          <span className="rounded border border-dashed border-border px-1 text-xs text-muted-foreground" data-editorial-skip key={index}>
             {`Image: ${node.src ?? ""} (${node.alt})`}
           </span>
         );
@@ -141,6 +156,92 @@ function renderInlines(inlines: MarkusInline[], context: PreviewContext): ReactN
   });
 }
 
+const MARK_CLASSES: Record<PreviewMark["severity"], string> = {
+  error: "decoration-destructive",
+  warn: "decoration-amber-500",
+  info: "decoration-sky-500",
+};
+
+function markElement(text: string, mark: PreviewMark, key: string, context: PreviewContext): ReactNode {
+  const active = mark.findingIds.some((id) => context.editorial?.activeFindingIds?.includes(id));
+  return (
+    <mark
+      className={`cursor-pointer bg-transparent text-inherit underline underline-offset-4 ${mark.status === "review" ? "decoration-dotted" : "decoration-wavy"} ${MARK_CLASSES[mark.severity]} ${active ? "rounded-sm bg-ring/25" : ""}`}
+      data-editorial-mark={mark.findingIds.join(" ")}
+      key={key}
+      onClick={(event) => {
+        event.preventDefault();
+        context.editorial?.onOpenMark(mark.findingIds, event.currentTarget);
+      }}
+    >
+      {text}
+    </mark>
+  );
+}
+
+/** Like renderInlines, but splits rendered text at editorial marks (offsets as in inlineLeaves). */
+function renderMarkedInlines(inlines: MarkusInline[], context: PreviewContext, marks: PreviewMark[], cursor: { at: number }): ReactNode[] {
+  const marked = (text: string, keyPrefix: string): ReactNode[] => {
+    const start = cursor.at;
+    cursor.at += text.length;
+    return splitByMarks(start, start + text.length, marks).map((piece, pieceIndex) => {
+      const slice = text.slice(piece.start - start, piece.end - start);
+      return piece.mark ? markElement(slice, piece.mark, `${keyPrefix}-${pieceIndex}`, context) : slice;
+    });
+  };
+  return inlines.map((node, index) => {
+    switch (node.type) {
+      case "text": {
+        const parts: ReactNode[] = [];
+        let last = 0;
+        for (const match of node.text.matchAll(CITATION_TOKEN)) {
+          const at = match.index ?? 0;
+          if (at > last) parts.push(...marked(node.text.slice(last, at), `${index}-${last}`));
+          parts.push(<span key={`${index}-t${at}`}>{renderText(match[0], context)}</span>);
+          last = at + match[0].length;
+        }
+        if (last < node.text.length) parts.push(...marked(node.text.slice(last), `${index}-${last}`));
+        return <span key={index}>{parts}</span>;
+      }
+      case "emphasis":
+        return <em key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</em>;
+      case "strong":
+        return <strong key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</strong>;
+      case "strikethrough":
+        return <s key={index}>{renderMarkedInlines(node.children, context, marks, cursor)}</s>;
+      case "code_span":
+        return <code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]" key={index}>{marked(node.code, `${index}`)}</code>;
+      case "link": {
+        const children = renderMarkedInlines(node.children, context, marks, cursor);
+        const custom = node.href ? context.renderLink?.(node.href, children) : null;
+        if (custom) return <span key={index}>{custom}</span>;
+        return node.href ? (
+          <a className="text-primary underline" href={node.href} key={index} rel="noopener noreferrer" target="_blank">{children}</a>
+        ) : (
+          <span key={index}>{children}</span>
+        );
+      }
+      case "soft_break":
+        cursor.at += 1;
+        return <span key={index}>{" "}</span>;
+      case "hard_break":
+        cursor.at += 1;
+        return <br key={index} />;
+      default:
+        return renderInlines([node], context)[0];
+    }
+  });
+}
+
+/** Render a prose block's inlines, with editorial marks when the block has an annotation. */
+function proseInlines(block: { inline: MarkusInline[] }, context: PreviewContext): { children: ReactNode[]; blockKey?: string } {
+  const annotation = context.editorial?.plan.get(block);
+  if (!context.editorial || !annotation) return { children: renderInlines(block.inline, context) };
+  const blockKey = String(context.editorial.blocks.size);
+  context.editorial.blocks.set(blockKey, annotation);
+  return { children: renderMarkedInlines(block.inline, context, annotation.marks, { at: 0 }), blockKey };
+}
+
 function soleToken(inlines: MarkusInline[]): string | null {
   if (inlines.length !== 1 || inlines[0].type !== "text") return null;
   const text = inlines[0].text.trim();
@@ -170,12 +271,14 @@ function renderBlock(block: MarkusBlock, index: number, context: PreviewContext)
           </ol>
         );
       }
-      return <p className="my-3 leading-relaxed" key={index}>{renderInlines(block.inline, context)}</p>;
+      const prose = proseInlines(block, context);
+      return <p className="my-3 leading-relaxed" data-editorial-block={prose.blockKey} key={index}>{prose.children}</p>;
     }
     case "heading": {
       const level = Math.min(Math.max(block.level, 1), 6);
       const Tag = `h${level}` as "h1";
-      return <Tag className={HEADING_CLASSES[level - 1]} key={index}>{renderInlines(block.inline, context)}</Tag>;
+      const prose = proseInlines(block, context);
+      return <Tag className={HEADING_CLASSES[level - 1]} data-editorial-block={prose.blockKey} key={index}>{prose.children}</Tag>;
     }
     case "list": {
       const items = block.items.map((item, itemIndex) => (
@@ -310,12 +413,45 @@ function renderBlocks(nodes: MarkusNode[], context: PreviewContext): ReactNode[]
   );
 }
 
+/** Characters of rendered text from the start of `block` to (node, offset), skipping citation and image furniture. */
+function renderedOffset(block: HTMLElement, node: Node, offset: number): number {
+  const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
+  let total = 0;
+  for (let current = walker.nextNode(); current; current = walker.nextNode()) {
+    const skipped = current.parentElement?.closest("[data-editorial-skip]");
+    if (current === node) return total + (skipped ? 0 : offset);
+    if (!skipped) total += current.textContent?.length ?? 0;
+  }
+  return total;
+}
+
+function previewSelectionHandler(context: PreviewContext) {
+  return (event: ReactMouseEvent<HTMLDivElement>) => {
+    const editorial = context.editorial;
+    if (!editorial?.onSelectSource) return;
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) return;
+    const range = selection.getRangeAt(0);
+    const startBlock = (range.startContainer.parentElement ?? null)?.closest<HTMLElement>("[data-editorial-block]");
+    const endBlock = (range.endContainer.parentElement ?? null)?.closest<HTMLElement>("[data-editorial-block]");
+    if (!startBlock || startBlock !== endBlock || !event.currentTarget.contains(startBlock)) return;
+    const annotation = editorial.blocks.get(startBlock.dataset.editorialBlock ?? "");
+    const source = selectionToSource(annotation, {
+      start: renderedOffset(startBlock, range.startContainer, range.startOffset),
+      end: renderedOffset(startBlock, range.endContainer, range.endOffset),
+    });
+    if (source) editorial.onSelectSource(source, range.getBoundingClientRect());
+  };
+}
+
 export function MarkusIrPreview({
   bodyIr,
   imageUrls = {},
   dynamicDirectives = {},
   renderLink,
+  editorial,
 }: {
+  editorial?: PreviewEditorial;
   bodyIr: unknown;
   imageUrls?: Record<string, string>;
   /** Live components for leaf directives whose content the host app computes, keyed by directive name. */
@@ -333,8 +469,13 @@ export function MarkusIrPreview({
       imageUrls,
       dynamicDirectives,
       renderLink,
+      editorial: editorial ? { ...editorial, plan: planPreview(document, editorial.result, editorial.findings), blocks: new Map() } : undefined,
     };
-    return <div data-markus-preview>{renderBlocks(document.children, context)}</div>;
+    return (
+      <div data-markus-preview onMouseUp={editorial?.onSelectSource ? previewSelectionHandler(context) : undefined}>
+        {renderBlocks(document.children, context)}
+      </div>
+    );
   } catch (error) {
     return (
       <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive" data-markus-preview-error role="alert">