Edit Viewer

1"use client";
2 
3import { EditViewer } from "@/components/viewers/edit/edit-viewer";
4import type { FormField } from "@/components/viewers/lib/edit-types";
5import editSample from "@/components/viewers/sample-data/edit.json";
6 
7const ORIGINAL_PDF_URL = "/samples/fidelity-edit/fidelity_original.pdf";
8 
9// A template-fill of the Fidelity "Bank Wire Authorization" form: 29 detected
10// form fields across 3 pages, each with a normalized bbox and an inferred value.
11const EDIT_FIELDS = editSample as FormField[];
12 
13/**
14 * Edit viewer block — detected fields beside the source document, linked by
15 * their bbox. `EditViewer` owns edit-specific modes, field visuals, search,
16 * filters, and page grouping while segmented-document owns hover,
17 * selection, and scroll-to-field behavior.
18 */
19export function EditViewerBlock() {
20  return (
21    <div className="bg-background flex h-full min-h-[680px] flex-col">
22      <EditViewer
23        result={{ fields: EDIT_FIELDS }}
24        sourceDocument={{
25          src: ORIGINAL_PDF_URL,
26          mimeType: "application/pdf",
27          filename: "fidelity-bank-wire-authorization.pdf",
28        }}
29      />
30    </div>
31  );
32}