SuperDoc

https://docs.superdoc.dev
Admin
SuperDoc is a document editor for the web that renders DOCX files with real-time collaboration,...
Tokens:1,119,692
Snippets:8,333
Trust Score:6.5
Update:5 months ago
Show doc for...
Tokens:
Raw
### onBeforeCreate Event Full Example

Source: https://docs.superdoc.dev/advanced/supereditor/events

A full example demonstrating the `onBeforeCreate` event within the `Editor.open` configuration. This allows for pre-initialization setup.

```javascript
import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onBeforeCreate: ({ editor }) => {
    // Set up external services
  },
});
```

--------------------------------

### Full Example: Initialize SuperDoc with Comments UI Setup

Source: https://docs.superdoc.dev/editor/built-in-ui/comments

A complete example demonstrating SuperDoc initialization with comments module configuration and adding the comments list UI via the `onReady` callback.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  user: { name: 'John Smith', email: 'john@company.com' },
  modules: { comments: { allowResolve: true } },
  onReady: (superdoc) => {
    superdoc.addCommentsList("#comments-sidebar");
  },
});
```

--------------------------------

### Full example of adding a comment

Source: https://docs.superdoc.dev/editor/built-in-ui/comments

This example demonstrates the full setup for initializing Superdoc and adding comments, including configuration options.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    user: { name: 'John Smith', email: 'john@company.com' },
    modules: { comments: { allowResolve: true } },
    onReady: (superdoc) => {
      // Simple usage
      superdoc.activeEditor.commands.addComment("Review this section");

      // With options
      superdoc.activeEditor.commands.addComment({
        content: "Please clarify this section",
        author: "John Smith",
        authorEmail: "john@company.com",
        isInternal: true,
      });
    },
  });
```

--------------------------------

### Initialize SuperDoc Client and Open Document

Source: https://docs.superdoc.dev/getting-started/ai

Install the SuperDoc SDK and initialize the client to interact with .docx files. This setup is used for building AI features into your product.

```javascript
npm install @superdoc-dev/sdk
```

```javascript
import { createSuperDocClient, chooseTools, dispatchSuperDocTool } from '@superdoc-dev/sdk';

const client = createSuperDocClient();
await client.connect();

const doc = await client.open({ doc: './contract.docx' });
const { tools } = await chooseTools({ provider: 'openai' });

// Pass `tools` to your model.
// Dispatch tool calls with dispatchSuperDocTool(doc, name, args).
```

--------------------------------

### Running Headless Toolbar Examples

Source: https://docs.superdoc.dev/advanced/headless-toolbar-examples

Instructions for running the provided headless toolbar examples. Replace `<example-name>` with the specific example directory (e.g., `vue-vuetify`, `svelte-shadcn`, or `vanilla`).

```bash
cd examples/advanced/headless-toolbar/<example-name>
pnpm install
pnpm dev
```

--------------------------------

### Install Superdoc SDK with Anthropic

Source: https://docs.superdoc.dev/document-engine/ai-agents/integrations

Install the Superdoc SDK and the Anthropic SDK. This setup is for integrating with Anthropic's LLM models.

```bash
npm install @superdoc-dev/sdk @anthropic-ai/sdk

```

--------------------------------

### Full Example of Context Menu Registration

Source: https://docs.superdoc.dev/editor/custom-ui/context-menu

This example shows a full React component setup for registering a context menu command, including cleanup with useEffect. It ensures the UI context is available before registering.

```tsx
import { useEffect } from 'react';
import { SuperDocUIProvider, useSuperDocUI } from 'superdoc/ui/react';

function Registrations() {
  const ui = useSuperDocUI();
  useEffect(() => {
    if (!ui) return;
    const reg = ui.commands.register({
      id: 'demo.insertClauseHere',
      execute: ({ context, editor }) => {
        const target = context?.position?.target;
        if (!target || !editor?.doc?.insert) return false;
        const receipt = editor.doc.insert({
          value: 'Standard clause text.',
          type: 'text',
          target,
        });
        return receipt?.success === true;
      },
      contextMenu: {
        label: 'Insert clause here',
        group: 'review',
        when: ({ entities, position, insideSelection }) =>
          entities.length === 0 && position !== null && insideSelection !== true,
      },
    });
    return () => reg.unregister();
  }, [ui]);
  return null;
}

export function App() {
  return (
    <SuperDocUIProvider>
      <Registrations />
    </SuperDocUIProvider>
  );
}
```

--------------------------------

### Quick Start SuperDocEditor Configuration

Source: https://docs.superdoc.dev/editor/react/configuration

Basic setup for the SuperDocEditor component, including document loading and initial mode.

```jsx
<SuperDocEditor
  document={file}
  documentMode="editing"
  user={{ name: 'Jane', email: 'jane@company.com' }}
  onReady={({ superdoc }) => console.log('Ready', superdoc)}
/>
```

--------------------------------

### Run Laravel Development Servers

Source: https://docs.superdoc.dev/getting-started/frameworks/laravel

Execute these commands to install dependencies and start both the PHP Artisan server and the Vite development server.

```bash
# Install dependencies
composer install && npm install

# Start both servers
npm run dev
```

--------------------------------

### Initialize SuperDoc with Toolbar

Source: https://docs.superdoc.dev/editor/built-in-ui/toolbar

Quick start example for initializing SuperDoc with a specified editor container and toolbar. The toolbar is configured using a CSS selector.

```javascript
const superdoc = new SuperDoc({
  selector: '#editor',
  document: 'contract.docx',
  toolbar: '#toolbar'  // Simple toolbar with defaults
});
```

--------------------------------

### Install SuperDoc SDK and OpenAI

Source: https://docs.superdoc.dev/ai/agents/llm-tools

Install the necessary packages for Node.js.

```bash
npm install @superdoc-dev/sdk openai
```

--------------------------------

### Install SuperDoc SDK and OpenAI

Source: https://docs.superdoc.dev/document-engine/ai-agents/llm-tools

Install the necessary packages for Node.js using npm.

```bash
npm install @superdoc-dev/sdk openai

```

--------------------------------

### Install SuperDoc SDK and OpenAI for Python

Source: https://docs.superdoc.dev/ai/agents/llm-tools

Install the necessary packages for Python.

```bash
pip install superdoc-sdk openai
```

--------------------------------

### Install SuperDoc SDK

Source: https://docs.superdoc.dev/llms.txt

Install the SuperDoc SDK for Node.js using npm.

```bash
npm install @superdoc-dev/sdk
```

--------------------------------

### Initialize SuperDoc with Comments Module

Source: https://docs.superdoc.dev/editor/built-in-ui/comments

Quick start example for initializing SuperDoc with the comments module enabled. Configure comment settings and handle comment update events.

```javascript
const superdoc = new SuperDoc({
  selector: "#editor",
  document: "contract.docx",
  user: {
    name: "John Smith",
    email: "john@company.com",
  },
  modules: {
    comments: {
      allowResolve: true,
      element: "#comments",
    },
  },
  onCommentsUpdate: ({ type, comment }) => {
    console.log("Comment event:", type);
  },
});
```

--------------------------------

### Initialize PDF Viewer with SuperDoc

Source: https://docs.superdoc.dev/editor/pdf

Quick start example for initializing the SuperDoc PDF viewer. It requires the pdfjsLib instance and optionally the worker source path. The `onPdfDocumentReady` callback is triggered when the PDF is ready.

```javascript
import { SuperDoc } from 'superdoc';
import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';

const pathToWorker = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString(); // example in Vite

const superdoc = new SuperDoc({
  selector: '#viewer',
  document: fileBlob,
  modules: {
    pdf: {
      pdfLib: pdfjsLib, // required
      setWorker: true, // auto-configure worker
      workerSrc: pathToWorker, // path to worker (falls back to CDN if omitted)
    },
  },
  onPdfDocumentReady: () => {
    console.log('PDF ready');
  },
});
```

--------------------------------

### Install Python SDK

Source: https://docs.superdoc.dev/document-engine/sdks

Install the Python SDK using pip. This command installs the necessary package for programmatic document editing.

```bash
pip install superdoc-sdk
```

--------------------------------

### Install SuperDoc CLI

Source: https://docs.superdoc.dev/document-engine/cli

Install the SuperDoc CLI globally using npm. Alternatively, use npx to run commands without installation.

```bash
npm install -g @superdoc-dev/cli
```

```bash
npx @superdoc-dev/cli open my-doc.docx
```

--------------------------------

### Install SuperDoc Template Builder Solution

Source: https://docs.superdoc.dev/solutions/overview

Install the SuperDoc Template Builder solution using npm. SuperDoc is automatically installed as a dependency.

```bash
npm install @superdoc-dev/template-builder
```

--------------------------------

### Install SuperDoc Package

Source: https://docs.superdoc.dev/editor/custom-ui/controller-setup

Install the SuperDoc package using pnpm.

```bash
pnpm add superdoc
```

--------------------------------

### Example Response for Get API

Source: https://docs.superdoc.dev/document-api/reference/sections/get

This JSON object represents a successful response from the Get API, detailing address, break type, index, page setup, and range information.

```json
{
  "address": {
    "kind": "section",
    "sectionId": "example"
  },
  "breakType": "continuous",
  "index": 1,
  "pageSetup": {
    "height": 12.5,
    "width": 12.5
  },
  "range": {
    "endParagraphIndex": 1,
    "startParagraphIndex": 1
  }
}
```

--------------------------------

### Example Hyperlink GET Request

Source: https://docs.superdoc.dev/document-api/reference/hyperlinks/get

Construct a JSON object with the target hyperlink's inline anchor details to retrieve its information. Ensure the blockId and offset are correctly specified for the start and end positions.

```json
{
  "target": {
    "anchor": {
      "end": {
        "blockId": "block-abc123",
        "offset": 0
      },
      "start": {
        "blockId": "block-abc123",
        "offset": 0
      }
    },
    "kind": "inline",
    "nodeType": "hyperlink"
  }
}
```

--------------------------------

### Basic SuperDoc Editor Setup in Angular

Source: https://docs.superdoc.dev/getting-started/frameworks/angular

Set up a basic SuperDoc editor component in Angular. This example uses `viewChild` to get a reference to the editor element and initializes SuperDoc after the view is initialized. It also ensures SuperDoc is destroyed when the component is destroyed.

```typescript
import { Component, ElementRef, viewChild, AfterViewInit, inject, DestroyRef } from '@angular/core';
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

@Component({
  selector: 'app-editor',
  template: `<div #editor style="height: 700px"></div>`,
})
export class EditorComponent implements AfterViewInit {
  private readonly editorRef = viewChild.required<ElementRef<HTMLDivElement>>('editor');
  private superdoc: SuperDoc | null = null;

  constructor() {
    inject(DestroyRef).onDestroy(() => this.superdoc?.destroy());
  }

  ngAfterViewInit() {
    this.superdoc = new SuperDoc({
      selector: this.editorRef().nativeElement,
      document: 'contract.docx',
      documentMode: 'editing',
    });
  }
}
```

--------------------------------

### Basic Setup with CDN

Source: https://docs.superdoc.dev/getting-started/frameworks/vanilla-js

Include SuperDoc via CDN for basic setup in an HTML file. This method is suitable for quick integration or simple projects.

```html
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css"
        rel="stylesheet">
</head>
<body>
  <div id="editor" style="height: 700px"></div>

  <script type="module">
    import { SuperDoc } from 'https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.es.js';

    const superdoc = new SuperDoc({
      selector: '#editor',
      document: 'contract.docx'
    });
  </script>
</body>
</html>
```

--------------------------------

### Install Yjs and Y-Websocket for Client

Source: https://docs.superdoc.dev/guides/collaboration/superdoc-yjs

Install the necessary Yjs and y-websocket packages for the client-side collaboration setup.

```bash
npm install yjs y-websocket
```

--------------------------------

### Complete Example with NPM/Bundler

Source: https://docs.superdoc.dev/getting-started/frameworks/vanilla-js

A full-page example using SuperDoc with NPM/Bundler, including file upload, mode switching (edit/review), and export functionality. Event listeners are set up for controls.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

let superdoc = null;

// File upload
document.getElementById('file-input').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  superdoc = new SuperDoc({
    selector: '#editor',
    document: file,
    documentMode: 'editing'
  });
});

// Mode controls
document.getElementById('mode-edit').addEventListener('click', () => {
  superdoc?.setDocumentMode('editing');
});

document.getElementById('mode-review').addEventListener('click', () => {
  superdoc?.setDocumentMode('suggesting');
});

// Export
document.getElementById('export-btn').addEventListener('click', async () => {
  await superdoc?.export({ isFinalDoc: true });
});
```

--------------------------------

### Initialize SuperDoc with onReady Callback

Source: https://docs.superdoc.dev/editor/superdoc/methods

Example of initializing SuperDoc and executing a command via the `onReady` callback. This demonstrates setting up the editor and performing an action once it's ready.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    if (superdoc.activeEditor) {
      superdoc.activeEditor.commands.toggleBold();
    }
  },
});
```

--------------------------------

### Example Response for Get Document

Source: https://docs.superdoc.dev/document-api/reference/get

This is an example of a successful response when retrieving a document. The 'body' field will contain the document content, and 'modelVersion' is a constant 'sdm/1'.

```json
{
  "body": [],
  "modelVersion": "sdm/1"
}
```

--------------------------------

### Full Example: Insert Table Command

Source: https://docs.superdoc.dev/extensions/table

This example demonstrates how to initialize SuperDoc and then use the `insertTable` command within the `onReady` callback to insert tables into the editor.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.insertTable()
    editor.commands.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
  },
});
```

--------------------------------

### Initialize SuperDoc with Extensions

Source: https://docs.superdoc.dev/extensions/overview

This example shows a full SuperDoc initialization, including how to access and use extension commands within the `onReady` callback. Ensure SuperDoc and its styles are imported.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // These commands come from extensions
    editor.commands.toggleBold();        // Bold extension
    editor.commands.insertTable();       // Table extension
    editor.commands.acceptAllTrackedChanges();  // TrackChanges extension
  },
});
```

--------------------------------

### Get HTML content

Source: https://docs.superdoc.dev/editor/react/methods

Example of how to retrieve the document content as an array of HTML strings.

```APIDOC
## Get HTML content

### Description
Retrieves the document content as an array of HTML strings, where each string represents a section of the document.

### Method
`getHTML(options?: any)`

### Returns
`string[]` - An array of HTML strings.

### Example
```jsx
const getHtmlContent = () => {
  const htmlArray = editorRef.current?.getInstance()?.getHTML();
  console.log(htmlArray); // Array of HTML strings per section
};
```
```

--------------------------------

### Full Example: Set Highlight

Source: https://docs.superdoc.dev/extensions/highlight

Demonstrates initializing SuperDoc and applying a highlight color using the `setHighlight` command within the `onReady` callback.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setHighlight('#FFEB3B');
    editor.commands.setHighlight('rgba(255, 235, 59, 0.5)');
  },
});
```

--------------------------------

### Example Response for Authorities Entries Get

Source: https://docs.superdoc.dev/document-api/reference/authorities/entries-get

This is an example of an empty JSON response, indicating a successful retrieval of authority entry information where no specific data fields are returned beyond a success status.

```json
{}
```

--------------------------------

### Full Example: Toggle Highlight

Source: https://docs.superdoc.dev/extensions/highlight

Demonstrates initializing SuperDoc and using the `toggleHighlight` command to manage highlight formatting.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.toggleHighlight();
  },
});
```

--------------------------------

### Full Font Size Initialization Example

Source: https://docs.superdoc.dev/extensions/font-size

Shows how to initialize the SuperDoc editor and use the `setFontSize` command within the `onReady` callback. This example includes necessary imports.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setFontSize('14pt')
    editor.commands.setFontSize('18px')
    editor.commands.setFontSize(16)
  },
});
```

--------------------------------

### Full Image Wrapping Example

Source: https://docs.superdoc.dev/extensions/image

A complete example demonstrating the initialization of SuperDoc and setting various image wrapping modes within the `onReady` callback. This includes importing necessary modules and configuring the editor.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      const editor = superdoc.activeEditor;
      // No wrapping, behind document
      editor.commands.setWrapping({ type: 'None', attrs: {behindDoc: true} })

      // Square wrapping on both sides with distances
      editor.commands.setWrapping({
        type: 'Square',
        attrs: {
          wrapText: 'bothSides',
          distTop: 10,
          distBottom: 10,
          distLeft: 10,
          distRight: 10
        }
      })

      // Tight wrapping with polygon
      editor.commands.setWrapping({
        type: 'Tight',
        attrs: {
          polygon: [[0, 0], [100, 0], [100, 100], [0, 100]]
        }
      })

      // Top and bottom wrapping
      editor.commands.setWrapping({
        type: 'TopAndBottom',
        attrs: {
          distTop: 15,
          distBottom: 15
        }
      })
    },
  });
```

--------------------------------

### Full Example: Toggle Link Command

Source: https://docs.superdoc.dev/extensions/link

Illustrates initializing the SuperDoc editor and using the toggleLink command within the onReady callback.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.toggleLink({ href: 'https://example.com' })
    editor.commands.toggleLink()
  },
});
```

--------------------------------

### Get Binding Response

Source: https://docs.superdoc.dev/document-api/reference/content-controls/get-binding

This is an example of a successful response when data binding metadata is found. It includes `prefixMappings`, `storeItemId`, and `xpath`.

```json
{
  "prefixMappings": "example",
  "storeItemId": "example",
  "xpath": "example"
}
```

--------------------------------

### Example Request for Get Footnote

Source: https://docs.superdoc.dev/document-api/reference/footnotes/get

Send this JSON payload to the `footnotes.get` API endpoint to retrieve details for a footnote identified by `noteId`.

```json
{
  "target": {
    "entityType": "footnote",
    "kind": "entity",
    "noteId": "example"
  }
}
```

--------------------------------

### Full DOCX Export Example

Source: https://docs.superdoc.dev/editor/superdoc/import-export

This example demonstrates initializing SuperDoc and then using various `export` options within the `onReady` callback to download or retrieve the document as a DOCX file.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: async (superdoc) => {
    // Download as .docx file
    await superdoc.export();

    // Get blob without triggering download
    const blob = await superdoc.export({ triggerDownload: false });

    // Export without comments
    await superdoc.export({ commentsType: 'clean' });

    // Export as final document (applies tracked changes)
    await superdoc.export({ isFinalDoc: true });

    // Custom filename
    await superdoc.export({ exportedName: 'Final Contract' });
  },
});
```

--------------------------------

### Get Stable Document Identifier

Source: https://docs.superdoc.dev/advanced/supereditor/methods

Obtain a stable document identifier, which can be a GUID or a content hash, using `getDocumentIdentifier`. This method is asynchronous.

```javascript
const id = await editor.getDocumentIdentifier();
```

```javascript
import { Editor } from 'superdoc/super-editor';
import 'superdoc/style.css';

const editor = await Editor.open(yourFile, {
  element: document.getElementById('editor'),
});

const id = await editor.getDocumentIdentifier();
```

--------------------------------

### Create a basic theme with `createTheme`

Source: https://docs.superdoc.dev/editor/theming/overview

Use `createTheme` to define colors and fonts. Apply the returned CSS class to the `<html>` element to theme the entire UI.

```javascript
import { createTheme } from 'superdoc';

const theme = createTheme({
  colors: { action: '#6366f1', bg: '#ffffff', text: '#1e293b', border: '#e2e8f0' },
  font: 'Inter, sans-serif',
});

document.documentElement.classList.add(theme);
```

--------------------------------

### Example History Get Response

Source: https://docs.superdoc.dev/document-api/reference/history/get

The response includes boolean flags for undo/redo availability, integer depths for undo/redo, and a list of history-unsafe operations.

```json
{
  "canRedo": true,
  "canUndo": true,
  "historyUnsafeOperations": [
    "example"
  ],
  "redoDepth": 1,
  "undoDepth": 1
}
```

--------------------------------

### Example Checkbox Get State Response

Source: https://docs.superdoc.dev/document-api/reference/content-controls/checkbox/get-state

The response indicates whether the checkbox content control is checked. The 'checked' field will be a boolean value.

```json
{
  "checked": true
}
```

--------------------------------

### Setup Real-time Collaboration with Yjs

Source: https://docs.superdoc.dev/editor/react/methods

Integrates Yjs and WebsocketProvider for real-time collaborative editing within the SuperDocEditor. Ensure Yjs and y-websocket are installed.

```jsx
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

function CollaborativeEditor() {
  const ydoc = useMemo(() => new Y.Doc(), []);
  const provider = useMemo(
    () => new WebsocketProvider('wss://your-server.com', 'doc-id', ydoc),
    [ydoc]
  );

  return (
    <SuperDocEditor
      document={file}
      modules={{
        collaboration: {
          ydoc,
          provider,
        },
      }}
    />
  );
}
```

--------------------------------

### Full Example: Set Heading Command

Source: https://docs.superdoc.dev/extensions/heading

This example demonstrates how to initialize SuperDoc and use the `setHeading` command within the `onReady` callback to set a heading level.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setHeading({ level: 2 })
  },
});
```

--------------------------------

### Full AI Agent Example with Vercel Tools

Source: https://docs.superdoc.dev/ai/agents/integrations

Demonstrates a complete workflow for setting up and running an AI agent using Vercel tools. It includes tool conversion, agent execution, and resource cleanup.

```typescript
const { tools: sdkTools } = await chooseTools({ provider: 'vercel' });
    const systemPrompt = await getSystemPrompt();

    // 3. Convert SDK tools into Vercel AI tool objects
    const tools: Record<string, any> = {};
    for (const t of sdkTools as any[]) {
      const fn = t.function;
      tools[fn.name] = {
        description: fn.description,
        inputSchema: jsonSchema<Record<string, unknown>>(fn.parameters),
        execute: async (args: Record<string, unknown>) => {
          try {
            return await dispatchSuperDocTool(doc, fn.name, args);
          } catch (err: any) {
            return { error: err.message };
          }
        },
      };
    }

    // 4. Run the agent (loop handled by generateText)
    const { text } = await generateText({
      model: openai.chat('gpt-5.4'),
      system: systemPrompt,
      messages: [
        { role: 'user', content: 'Find the termination clause and rewrite it to allow 30-day notice.' },
      ],
      tools,
      stopWhen: stepCountIs(10),
    });

    console.log(text);

    // 5. Save and clean up
    await doc.save({ inPlace: true });
    await doc.close();
    await client.dispose();
```

--------------------------------

### Example Bibliography Get Request

Source: https://docs.superdoc.dev/document-api/reference/citations/bibliography-get

Use this JSON payload to request information about a specific bibliography block. Ensure the `nodeId` matches the target bibliography.

```json
{
  "target": {
    "kind": "block",
    "nodeId": "node-def456",
    "nodeType": "bibliography"
  }
}
```

--------------------------------

### Full Example: Initialize SuperDoc and Set Text Alignment

Source: https://docs.superdoc.dev/extensions/text-align

This example shows how to initialize the SuperDoc editor and use the `setTextAlign` command within the `onReady` callback.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setTextAlign('center')
    editor.commands.setTextAlign('justify')
  },
});
```

--------------------------------

### Document ID Hashing Example

Source: https://docs.superdoc.dev/resources/telemetry

Illustrates how a document identifier is generated by hashing the GUID and creation timestamp from file metadata. This is the most stable identification strategy.

```text
documentId = hash(GUID | creationTimestamp)   →   "HASH-A1B2C3D4"
```

--------------------------------

### Complete Example with CDN

Source: https://docs.superdoc.dev/getting-started/frameworks/vanilla-js

A full-page example demonstrating SuperDoc integration with CDN, including file upload, mode switching (edit/review), and export functionality.

```html
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css"
        rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.min.js"></script>
</head>
<body>
  <div class="controls">
    <input type="file" id="file-input" accept=".docx">
    <button id="mode-edit">Edit</button>
    <button id="mode-review">Review</button>
    <button id="export-btn">Export</button>
  </div>

  <div id="editor" style="height: 700px"></div>

  <script>
    let superdoc = null;
    
    document.getElementById('file-input').addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;
      
      superdoc = new SuperDoc({
        selector: '#editor',
        document: file,
        documentMode: 'editing'
      });
    });
    
    document.getElementById('mode-edit').addEventListener('click', () => {
      superdoc?.setDocumentMode('editing');
    });
    
    document.getElementById('mode-review').addEventListener('click', () => {
      superdoc?.setDocumentMode('suggesting');
    });
    
    document.getElementById('export-btn').addEventListener('click', async () => {
      await superdoc?.export({ isFinalDoc: true });
    });
  </script>
</body>
</html>
```

--------------------------------

### Example Bookmark Get Request

Source: https://docs.superdoc.dev/document-api/reference/bookmarks/get

Use this JSON payload to request details for a specific bookmark. Ensure the 'name' field matches the bookmark you want to retrieve.

```json
{
  "target": {
    "entityType": "bookmark",
    "kind": "entity",
    "name": "example",
    "story": {
      "kind": "story",
      "storyType": "body"
    }
  }
}
```

--------------------------------

### Full Example: Set Link Command

Source: https://docs.superdoc.dev/extensions/link

Illustrates how to initialize the SuperDoc editor and use the setLink command within the onReady callback.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setLink({ href: 'https://example.com' })
    editor.commands.setLink({
      href: 'https://example.com',
      text: 'Visit Example'
    })
  },
});
```

--------------------------------

### Pages Router Editor Setup

Source: https://docs.superdoc.dev/getting-started/frameworks/nextjs

Set up the SuperDoc editor for Next.js Pages Router. This example shows a basic integration without client-side specific directives.

```jsx
// pages/editor.jsx
import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';

export default function EditorPage() {
  return (
    <SuperDocEditor
      document="/sample.docx"
      documentMode="editing"
      style={{ height: '100vh' }}
    />
  );
}
```

--------------------------------

### Full Example: Delete Table Command

Source: https://docs.superdoc.dev/extensions/table

This example shows the initialization of SuperDoc and the subsequent use of the `deleteTable` command within the `onReady` function to delete a table.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.deleteTable()
  },
});
```

--------------------------------

### Get SelectionTarget for Mutation

Source: https://docs.superdoc.dev/document-api/overview

This JSON structure defines a text selection range with start and end points, used for targeting mutations like replace or delete.

```json
{
  "kind": "selection",
  "start": { "kind": "text", "blockId": "p1", "offset": 0 },
  "end": { "kind": "text", "blockId": "p1", "offset": 5 }
}
```

--------------------------------

### Full Example: Set Underline Command

Source: https://docs.superdoc.dev/extensions/underline

This example demonstrates how to initialize the SuperDoc editor and apply underline formatting using the `setUnderline` command within the `onReady` callback.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setUnderline();
  },
});
```

--------------------------------

### Get Document Metadata

Source: https://docs.superdoc.dev/advanced/supereditor/methods

Retrieve document metadata including its unique GUID, modification status, and version using `getMetadata`. This is useful for tracking document state.

```javascript
const { documentGuid, isModified, version } = editor.getMetadata();
```

```javascript
import { Editor } from 'superdoc/super-editor';
import 'superdoc/style.css';

const editor = await Editor.open(yourFile, {
  element: document.getElementById('editor'),
});

const { documentGuid, isModified, version } = editor.getMetadata();
```

--------------------------------

### Example Request for Get Document

Source: https://docs.superdoc.dev/document-api/reference/get

Use this JSON payload to request the full document with provenance and resolved content included. Ensure the options object is correctly formatted.

```json
{
  "options": {
    "includeProvenance": true,
    "includeResolved": true
  }
}
```

--------------------------------

### Initialize SuperEditor

Source: https://docs.superdoc.dev/advanced/supereditor/configuration

Use `Editor.open()` to create and mount an editor instance. It handles DOCX parsing, extension setup, and mounting automatically. Ensure the CSS is imported for proper styling.

```javascript
import "superdoc/style.css";
import { Editor } from "superdoc/super-editor";

const editor = await Editor.open(docxFile, {
  element: document.getElementById("editor"),
  documentMode: "editing",
});
```

--------------------------------

### Get Raw Content Control Properties Response

Source: https://docs.superdoc.dev/document-api/reference/content-controls/get-raw-properties

This is an example of the response received after requesting raw content control properties. It contains an empty 'properties' object by default.

```json
{
  "properties": {}
}
```

--------------------------------

### onCreate Event Full Example

Source: https://docs.superdoc.dev/advanced/supereditor/events

This example shows the `onCreate` event being used to focus the editor immediately after it has been fully initialized.

```javascript
import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onCreate: ({ editor }) => {
    editor.focus();
  },
});
```

--------------------------------

### Example Checkbox Get State Request

Source: https://docs.superdoc.dev/document-api/reference/content-controls/checkbox/get-state

Use this JSON payload to request the state of a checkbox content control. Ensure the target nodeId and kind are correctly specified.

```json
{
  "target": {
    "kind": "block",
    "nodeId": "node-def456",
    "nodeType": "sdt"
  }
}
```

--------------------------------

### Full Example: Toggle Underline Command

Source: https://docs.superdoc.dev/extensions/underline

This example demonstrates how to initialize the SuperDoc editor and toggle underline formatting using the `toggleUnderline` command within the `onReady` callback.

```javascript
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.toggleUnderline();
  },
});
```
Tokens:
Raw