Metadata

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { metadataPlugin, useMetadataState } from '@embedpdf/react/metadata';
import { localEngine } from '@embedpdf/engine';

import './properties.css';

const engine = localEngine();
const plugins = [metadataPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

const FIELDS = [
  ['title', 'Title'],
  ['author', 'Author'],
  ['subject', 'Subject'],
  ['keywords', 'Keywords'],
  ['creator', 'Made in'],
  ['producer', 'Turned into a PDF by'],
  ['createdAt', 'Created'],
  ['modifiedAt', 'Last changed'],
  ['trapped', 'Trapped'],
] as const;

// Dates are ISO strings: show them in the reader's own format.
const DATES: ReadonlySet<string> = new Set(['createdAt', 'modifiedAt']);
const show = (field: string, value: string | null) => {
  if (value === null) return null;
  return DATES.has(field) ? new Date(value).toLocaleString() : value;
};

// The document's properties, the way a "Document properties" dialog shows them.
function Properties() {
  const { metadata, status } = useMetadataState();

  return (
    <section className="panel">
      <header className="panel-header">
        <h3 className="panel-title">Document properties</h3>
        <span className="status" data-status={status}>
          {status}
        </span>
      </header>
      <dl className="properties">
        {FIELDS.map(([field, label]) => {
          const value = metadata ? show(field, metadata[field]) : null;
          return (
            <div className="property" key={field}>
              <dt>{label}</dt>
              <dd className={value === null ? 'unset' : undefined}>{value ?? 'not set'}</dd>
            </div>
          );
        })}
      </dl>
    </section>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <Properties />
      </DocumentGate>
    </Viewer>
  );
}

import { useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { DocumentMetadata, OpenInput } from '@embedpdf/react/runtime';
import {
  metadataPlugin,
  useMetadata,
  useMetadataEvent,
  useMetadataState,
} from '@embedpdf/react/metadata';
import { localEngine } from '@embedpdf/engine';

import './edit.css';

const engine = localEngine();
const plugins = [metadataPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

const EDITABLE = ['title', 'author', 'subject', 'keywords'] as const;
type Draft = Record<(typeof EDITABLE)[number], string>;

// A properties form: the inputs start with what the file says, and Save writes them back.
function PropertiesForm({ initial }: { initial: DocumentMetadata }) {
  const metadata = useMetadata();
  const modifiedAt = useMetadataState((state) => state.metadata?.modifiedAt ?? null);
  const [draft, setDraft] = useState<Draft>({
    title: initial.title ?? '',
    author: initial.author ?? '',
    subject: initial.subject ?? '',
    keywords: initial.keywords ?? '',
  });
  const [changes, setChanges] = useState<string[]>([]);

  // Every change to the standard fields, by you or anyone else.
  useMetadataEvent(
    (capability) => capability.onUpdated,
    ({ changedKeys, origin }) =>
      setChanges((list) => [
        `${changedKeys.join(', ')} changed ${origin.kind === 'local' ? 'here' : 'elsewhere'}`,
        ...list,
      ]),
  );

  const canUpdate = metadata.canUpdate();
  // An empty field removes it: null, not ''.
  const save = () =>
    metadata.update({
      title: draft.title.trim() || null,
      author: draft.author.trim() || null,
      subject: draft.subject.trim() || null,
      keywords: draft.keywords.trim() || null,
    });

  return (
    <div className="layout">
      <form
        className="form"
        onSubmit={(event) => {
          event.preventDefault();
          void save();
        }}
      >
        {EDITABLE.map((key) => (
          <label className="row" key={key}>
            <span className="name">{key}</span>
            <input
              className="field"
              value={draft[key]}
              disabled={!canUpdate}
              placeholder="not set"
              onChange={(event) => setDraft({ ...draft, [key]: event.target.value })}
            />
          </label>
        ))}
        <div className="actions">
          <button type="submit" className="button primary" disabled={!canUpdate}>
            Save
          </button>
          <button
            type="button"
            className="button"
            disabled={!canUpdate}
            onClick={() => metadata.update({ modifiedAt: new Date() })}
          >
            Set the modified date to now
          </button>
        </div>
      </form>
      <section className="changes" aria-live="polite">
        <h3 className="changes-title">Changes</h3>
        <p className="modified">
          Last changed: {modifiedAt ? new Date(modifiedAt).toLocaleString() : 'not set'}
        </p>
        {changes.length === 0 ? (
          <p className="empty">Edit a field and save.</p>
        ) : (
          <ul className="log">
            {changes.map((change, index) => (
              <li key={changes.length - index}>{change}</li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}

// The form starts once the properties have been read from the file.
function PropertiesEditor() {
  const fields = useMetadataState((state) => state.metadata);
  return fields ? <PropertiesForm initial={fields} /> : <p className="loading">Reading…</p>;
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <PropertiesEditor />
      </DocumentGate>
    </Viewer>
  );
}

import { useEffect, useState } from 'react';
import { Viewer, DocumentGate, isPluginError } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { metadataPlugin, useMetadata, useMetadataState } from '@embedpdf/react/metadata';
import { localEngine } from '@embedpdf/engine';

import './custom-fields.css';

const engine = localEngine();
const plugins = [metadataPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// Your own fields, kept in the document: add one, change one, remove one.
function CustomFields() {
  const metadata = useMetadata();
  const { custom } = useMetadataState();
  const [name, setName] = useState('');
  const [value, setValue] = useState('');
  const [error, setError] = useState<string | null>(null);

  // Two fields of our own, written on load. Setting the same values again changes nothing.
  useEffect(() => {
    void metadata.custom.update({ contractId: 'C-2026-114', reviewedBy: 'dana' });
  }, [metadata]);

  const canUpdate = metadata.canUpdate();
  const add = async () => {
    try {
      await metadata.custom.update({ [name.trim()]: value });
      setName('');
      setValue('');
      setError(null);
    } catch (failure) {
      // A name the PDF can't take, such as one of the standard fields.
      if (isPluginError(failure, 'invalid-input')) setError(failure.message);
      else throw failure;
    }
  };

  return (
    <section className="panel">
      <table className="fields">
        <thead>
          <tr>
            <th>Name</th>
            <th>Value</th>
            <th aria-label="Remove" />
          </tr>
        </thead>
        <tbody>
          {Object.entries(custom ?? {}).map(([key, text]) => (
            <tr key={key}>
              <td className="key">{key}</td>
              <td>{text}</td>
              <td>
                <button
                  type="button"
                  className="button quiet"
                  disabled={!canUpdate}
                  // null removes a field; the others stay as they are.
                  onClick={() => metadata.custom.update({ [key]: null })}
                >
                  Remove
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <form
        className="add"
        onSubmit={(event) => {
          event.preventDefault();
          void add();
        }}
      >
        <input
          className="field"
          aria-label="Name"
          placeholder="Name, such as approvedOn"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
        <input
          className="field"
          aria-label="Value"
          placeholder="Value"
          value={value}
          onChange={(event) => setValue(event.target.value)}
        />
        <button type="submit" className="button" disabled={!canUpdate || !name.trim()}>
          Add
        </button>
      </form>
      {error && <p className="error">{error}</p>}
    </section>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <CustomFields />
      </DocumentGate>
    </Viewer>
  );
}