문서 모델과 편집

"use client";
// Install @reopt-ai/opt-charts and @reopt-ai/opt-datagrid alongside opt-deck.
import { DeckEditor } from "@reopt-ai/opt-deck";
import { optChartsExtension } from "@reopt-ai/opt-deck/opt-charts";
import { optDataGridExtension } from "@reopt-ai/opt-deck/opt-datagrid";
import "@reopt-ai/opt-deck/styles.css";

const extensions = [optChartsExtension(), optDataGridExtension()];
export function ChartPresentation() {
  return <DeckEditor extensions={extensions} locale="ko" />;
}

import {
  createDeckDocument,
  createNode,
  applySceneTransaction,
} from "@reopt-ai/opt-deck/server";

const document = createDeckDocument({ design: "product", title: "Launch" });
const slideId = document.slideOrder[0];
const node = createNode(document, "text", "launch-heading");
const next = applySceneTransaction(document, {
  baseRevision: document.revision,
  label: "Add heading",
  operations: [
    { type: "insert-node", parentId: slideId, node },
    { type: "update-node", id: node.id, patch: { x: 120, y: 100 } },
  ],
});
// next is a new validated document; document is unchanged.
export { next };

"use client";
import { useDeck } from "@reopt-ai/opt-deck";
import { DeckViewer } from "@reopt-ai/opt-deck/viewer";

export function HostControlledPresentation() {
  const deck = useDeck({ historyLimit: 100 });
  function rename() {
    const current = deck.getSnapshot();
    deck.dispatch({
      baseRevision: current.revision,
      label: "Rename slide",
      operations: [{
        type: "update-slide",
        id: current.slideOrder[0],
        patch: { name: "Customer introduction" },
      }],
    });
  }
  return (
    <div>
      <button onClick={rename}>Rename first slide</button>
      <button onClick={deck.undo} disabled={!deck.canUndo}>Undo</button>
      <DeckViewer document={deck.document} />
    </div>
  );
}

import {
  createDeckDocument, createDeckVariant,
  compareVariantSource, mergeVariantSource, applySceneTransaction,
} from "@reopt-ai/opt-deck/server";

const source = createDeckDocument({ title: "Company introduction" });
const customer = createDeckVariant(source, "customer-a", "Customer A");
const updatedSource = applySceneTransaction(source, {
  baseRevision: source.revision,
  label: "Update source notes",
  operations: [{ type: "update-slide", id: source.slideOrder[0],
    patch: { notes: "Updated presenter guidance" } }],
});
const changes = compareVariantSource(customer, updatedSource);
// Present changes to the user before choosing the accepted set.
const accepted = changes.filter((change) => !change.conflict);
const merged = mergeVariantSource(customer, updatedSource, accepted);
export { changes, merged };