Commands & shortcuts

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { commandsPlugin, standardCommands, useCommand } from '@embedpdf/react/commands';
import { cloudEngine } from '@cloudpdf/engine';

import './buttons.css';

const engine = cloudEngine();
const plugins = [stagePlugin(), renderPlugin(), commandsPlugin({ commands: standardCommands })];

const ebook: OpenInput = { kind: 'share', shareToken: 'shr_WGj1goAtlNN_fQ5OswPrbJQM' };

// One button, drawn from its command: the label, the shortcut, and whether it can run now.
function CommandButton({ id }: { id: string }) {
  const command = useCommand(id);
  if (!command.visible) return null;

  return (
    <button
      type="button"
      className="button"
      title={command.label}
      disabled={!command.enabled}
      aria-pressed={command.active}
      onClick={command.run}
    >
      {command.label}
      {command.shortcut && <kbd className="shortcut">{command.shortcut}</kbd>}
    </button>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <div className="toolbar">
          <CommandButton id="page:previous" />
          <CommandButton id="page:next" />
          <CommandButton id="zoom:out" />
          <CommandButton id="zoom:in" />
          <CommandButton id="zoom:fit-width" />
          <CommandButton id="view:rotate-clockwise" />
          <CommandButton id="document:download" />
        </div>
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { useRef, useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { interactionPlugin } from '@embedpdf/react/interaction';
import {
  commandsPlugin,
  formatShortcut,
  standardCommands,
  useCommand,
  useCommandShortcuts,
  useCommands,
  useCommandsEvent,
} from '@embedpdf/react/commands';
import { cloudEngine } from '@cloudpdf/engine';

import './shortcuts.css';

const engine = cloudEngine();
const plugins = [
  stagePlugin(),
  renderPlugin(),
  interactionPlugin(),
  commandsPlugin({ commands: standardCommands }),
];

const ebook: OpenInput = { kind: 'share', shareToken: 'shr_WGj1goAtlNN_fQ5OswPrbJQM' };

// One row of the sheet: the key, and what it does. A command that can't run now is greyed out.
function ShortcutRow({ id, shortcut }: { id: string; shortcut: string }) {
  const command = useCommand(id);
  if (!command.visible) return null;

  return (
    <li className="row" data-disabled={!command.enabled || undefined}>
      <kbd className="key">{formatShortcut(shortcut)}</kbd>
      <span>{command.label}</span>
    </li>
  );
}

// The sheet lists every shortcut, and shows the last command a key ran.
function KeyboardHelp() {
  const commands = useCommands();
  const [last, setLast] = useState<string | null>(null);

  useCommandsEvent(
    (commands) => commands.onExecuted,
    ({ commandId }) => setLast(commands.resolveCommand(commandId)?.label ?? commandId),
  );

  return (
    <aside className="sheet">
      <p className="status">
        {last ? `Ran: ${last}` : 'Click the viewer, then press a key, such as → for the next page'}
      </p>
      <ul className="rows">
        {commands.listShortcuts().map(({ commandId, shortcut }) => (
          <ShortcutRow key={`${commandId} ${shortcut}`} id={commandId} shortcut={shortcut} />
        ))}
      </ul>
    </aside>
  );
}

// The keys work while focus is inside this viewer, so they leave the rest of the page alone. A
// click anywhere in it gives it focus: `tabIndex={-1}` makes it a place for keys, not a stop in the
// Tab order.
function ShortcutArea() {
  const area = useRef<HTMLDivElement>(null);
  useCommandShortcuts({ target: area });
  return (
    <div ref={area} className="layout" tabIndex={-1}>
      <KeyboardHelp />
      <Stage className="stage">{() => <RenderLayer />}</Stage>
    </div>
  );
}

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

import { useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { interactionPlugin } from '@embedpdf/react/interaction';
import {
  commandsPlugin,
  standardCommands,
  useCommand,
  useCommands,
} from '@embedpdf/react/commands';
import { cloudEngine } from '@cloudpdf/engine';

import './palette.css';

const engine = cloudEngine();
const plugins = [
  stagePlugin(),
  renderPlugin(),
  interactionPlugin(),
  commandsPlugin({ commands: standardCommands }),
];

const ebook: OpenInput = { kind: 'share', shareToken: 'shr_WGj1goAtlNN_fQ5OswPrbJQM' };

// A result: its row follows the command, so it greys out the moment the command can't run.
function Result({ id }: { id: string }) {
  const command = useCommand(id);
  if (!command.visible) return null;

  return (
    <li>
      <button type="button" className="result" disabled={!command.enabled} onClick={command.run}>
        <span>{command.label}</span>
        {command.shortcut && <kbd className="shortcut">{command.shortcut}</kbd>}
      </button>
    </li>
  );
}

function CommandPalette() {
  const commands = useCommands();
  const [query, setQuery] = useState('page');
  const results = commands.searchCommands(query);

  return (
    <div className="palette">
      <input
        className="field"
        type="search"
        aria-label="Search commands"
        placeholder="Type a command…"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        onKeyDown={(event) => {
          // Enter runs the first result that can run now.
          const first = results.find((command) => commands.canExecute(command.id));
          if (event.key === 'Enter' && first) void commands.execute(first.id);
        }}
      />
      <ul className="results">
        {results.map((command) => (
          <Result key={command.id} id={command.id} />
        ))}
        {results.length === 0 && <li className="empty">No command matches</li>}
      </ul>
    </div>
  );
}

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

import { useEffect } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, StageToken, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import {
  commandsPlugin,
  standardCommands,
  useCommand,
  useCommands,
  useCommandsSettings,
} from '@embedpdf/react/commands';
import type { CommandDef } from '@embedpdf/react/commands';
import { cloudEngine } from '@cloudpdf/engine';

import './custom.css';

const engine = cloudEngine();

// A command of your own: pressed while the pages show two at a time.
const twoPages: CommandDef = {
  id: 'layout:two-pages',
  label: 'Two pages',
  categories: ['layout'],
  active: ({ get }) => get(StageToken).getSettings().spread === 'odd',
  run: ({ get }) => {
    const stage = get(StageToken);
    stage.updateSettings({ spread: stage.getSettings().spread === 'odd' ? 'none' : 'odd' });
  },
};

const plugins = [
  stagePlugin(),
  renderPlugin(),
  commandsPlugin({ commands: [...standardCommands, twoPages] }),
];

const ebook: OpenInput = { kind: 'share', shareToken: 'shr_WGj1goAtlNN_fQ5OswPrbJQM' };

function CommandButton({ id }: { id: string }) {
  const command = useCommand(id);
  if (!command.visible) return null;

  return (
    <button
      type="button"
      className="button"
      disabled={!command.enabled}
      aria-pressed={command.active}
      onClick={command.run}
    >
      {command.label}
    </button>
  );
}

// Turning a category off hides its commands wherever they appear.
function CategorySwitch({ category, label }: { category: string; label: string }) {
  const commands = useCommands();
  const off = useCommandsSettings((settings) => settings.disabledCategories.includes(category));

  return (
    <label className="switch">
      <input
        type="checkbox"
        checked={!off}
        onChange={(event) =>
          event.target.checked
            ? commands.enableCategory(category)
            : commands.disableCategory(category)
        }
      />
      {label}
    </label>
  );
}

function Toolbar() {
  const commands = useCommands();

  // Run from code: the document opens with its whole first page in view.
  useEffect(() => {
    void commands.execute('zoom:fit-page');
  }, [commands]);

  return (
    <div className="toolbar">
      <div className="buttons">
        <CommandButton id="zoom:out" />
        <CommandButton id="zoom:in" />
        <CommandButton id="zoom:fit-page" />
        <CommandButton id="layout:two-pages" />
      </div>
      <div className="switches">
        <CategorySwitch category="zoom" label="Zoom" />
        <CategorySwitch category="layout" label="Layout" />
      </div>
    </div>
  );
}

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