### Development Setup

Source: https://docx-editor.dev

Instructions for setting up the development environment using Bun. Includes installing dependencies, running the development server, and executing tests.

```bash
bun install
bun run dev // Vite demo on localhost:5173
```

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

### Install Dependencies

Source: https://docx-editor.dev

Install project dependencies using Bun. This command should be run before starting development or building.

```bash
bun install
```

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

### Run Development Server

Source: https://docx-editor.dev

Start the Vite development server for the Docx Editor. This will typically launch a local instance on localhost:5173.

```bash
bun run dev
```

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

### Install DOCX Editor JS Component

Source: https://docx-editor.dev

Use npm to install the DOCX editor JS component. This command is required to begin using the editor in your React project.

```bash
$npm install @eigenpal/docx-js-editor
```

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

### Initialize DocxEditor Component

Source: https://docx-editor.dev

Basic setup for the DocxEditor component, requiring the document buffer and an onSave callback. Ensure the component styles are imported.

```javascript
import { DocxEditor } from '@eigenpal/docx-js-editor'
import '@eigenpal/docx-js-editor/styles.css'

function App({ file }: { file: ArrayBuffer }) {
return (
<DocxEditor
documentBuffer={file}
onSave={(buffer) => uploadToServer(buffer)}
/>
)
}
```

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

### Basic Docx Editor Setup in React

Source: https://docx-editor.dev

Add a functional DOCX editor to your React application with basic save functionality. Ensure to import the necessary styles.

```tsx
import { useRef } from 'react';
import { DocxEditor, type DocxEditorRef } from '@eigenpal/docx-js-editor';
import '@eigenpal/docx-js-editor/styles.css';

function Editor({ file }: { file: ArrayBuffer }) {
  const editorRef = useRef<DocxEditorRef>(null);

  const handleSave = async () => {
    const buffer = await editorRef.current?.save();
    if (buffer) {
      await fetch('/api/documents/1', { method: 'PUT', body: buffer });
    }
  };

  return (
    <>
      <button onClick={handleSave}>Save</button>
      <DocxEditor ref={editorRef} documentBuffer={file} />
    </>
  );
}

```

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

### Integrate Docx Editor with AI Agents in React

Source: https://docx-editor.dev

Wire agent tools to a live editor and stream tokens while executing tool calls in the browser. This setup is for React applications using the AI SDK.

```tsx
import { DocxEditor } from '@eigenpal/docx-js-editor';
import { useDocxAgentTools } from '@eigenpal/docx-editor-agents/react';
import { useChat } from '@ai-sdk/react';

// 1. Wire agent tools to the live editor
const { executeToolCall, getContext } = useDocxAgentTools({
  editorRef,
  author: 'Assistant',
});

// 2. Stream tokens, run tool calls in the browser
const chat = useChat({
  api: '/api/agent-chat',
  onToolCall: ({ toolCall }) =>
    executeToolCall(toolCall.toolName, toolCall.input),
});

// 3. Render: editor + agent panel side by side
<DocxEditor ref={editorRef} documentBuffer={buf}
  agentPanel={{ render: () => <AgentChatLog ... /> }} />

// Headless? Swap useDocxAgentTools for DocxReviewer.fromBuffer().

```

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

### Get Current Document Object

Source: https://docx-editor.dev

Retrieve the current document object from the Docx Editor.

```typescript
ref.current.getDocument()
```

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

### DocxEditor Ref Methods

Source: https://docx-editor.dev

Access and control the DocxEditor instance using a ref. Available methods include saving, getting the document object, setting zoom, scrolling, and printing.

```javascript
const ref = useRef<DocxEditorRef>(null)
await ref.current.save() // ArrayBuffer of the .docx
ref.current.getDocument() // current document object
ref.current.setZoom(1.5) // set zoom to 150%
ref.current.scrollToPage(3) // scroll to page 3
ref.current.print() // print
```

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

### Print Document

Source: https://docx-editor.dev

Initiate the print action for the current document.

```typescript
ref.current.print()
```

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

### Initialize Docx Editor Ref

Source: https://docx-editor.dev

Initialize a ref to access Docx Editor methods. Ensure the ref is correctly typed with DocxEditorRef and initialized to null.

```typescript
const ref = useRef<DocxEditorRef>(null)
```

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

### DocxEditor Ref Methods

Source: https://docx-editor.dev

Available methods exposed through the DocxEditor ref for programmatic control.

```APIDOC
## DocxEditor Ref Methods

### Description
Methods available via a ref to interact with the DocxEditor instance.

### Usage
```javascript
const ref = useRef<DocxEditorRef>(null)

// Save the document
await ref.current.save() // Returns ArrayBuffer of the .docx

// Get the current document object
ref.current.getDocument()

// Set zoom level
ref.current.setZoom(1.5) // set zoom to 150%

// Scroll to a specific page
ref.current.scrollToPage(3) // scroll to page 3

// Print the document
ref.current.print()
```
```

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

### DocxEditor Component Usage

Source: https://docx-editor.dev

Basic usage of the DocxEditor component, loading a document buffer and handling save events.

```APIDOC
## DocxEditor Component

### Description
An open-source WYSIWYG .docx editor for React. Allows users to open, edit, and save Word documents entirely in the browser.

### Usage
```javascript
import { DocxEditor } from '@eigenpal/docx-js-editor'
import '@eigenpal/docx-js-editor/styles.css'

function App({ file }: { file: ArrayBuffer }) {
  return (
    <DocxEditor
      documentBuffer={file}
      onSave={(buffer) => uploadToServer(buffer)}
    />
  )
}
```

### Props
#### documentBuffer
- **Type**: `ArrayBuffer`
- **Default**: `—`
- **Description**: `.docx` file contents to load.

#### readOnly
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Preview mode — no editing UI.

#### showToolbar
- **Type**: `boolean`
- **Default**: `true`
- **Description**: Show formatting toolbar.

#### author
- **Type**: `string`
- **Default**: `'User'`
- **Description**: Author name for comments and tracked changes.

#### onChange
- **Type**: `function`
- **Default**: `—`
- **Description**: Called on every document change.

#### onSave
- **Type**: `function`
- **Default**: `—`
- **Description**: Called on save, receives `ArrayBuffer`.

#### onError
- **Type**: `function`
- **Default**: `—`
- **Description**: Called on error.
```

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

### Basic DocxEditor Integration in React

Source: https://docx-editor.dev

Integrates the DocxEditor component into a React application. Pass the document buffer and an onSave handler to manage document saving. Ensure to import the necessary styles.

```javascript
import { DocxEditor } from '@eigenpal/docx-js-editor'
import '@eigenpal/docx-js-editor/styles.css'

function App({ file }: { file: ArrayBuffer }) {
  return (
    <DocxEditor documentBuffer={file} onSave={(buffer) => uploadToServer(buffer)} />
  )
}
```

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

### DocxEditor Configuration

Source: https://docx-editor.dev

Configuration options for the DocxEditor component. These include event handlers for document changes, saving, and errors, as well as author information for comments.

```APIDOC
## DocxEditor Configuration

### Properties

- **author** (string) - 'User' - Author name for comments and tracked changes.
- **onChange** (function) - Called on every document change.
- **onSave** (function) - Called on save, receives ArrayBuffer.
- **onError** (function) - Called on error.
```

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

### DocxEditor Component Props

Source: https://docx-editor.dev

Configuration options for the DocxEditor, including read-only mode, toolbar visibility, author name, and event handlers for changes, saving, and errors.

```javascript
documentBuffer
ArrayBuffer
—
.docx file contents to load
readOnly
boolean
false
Preview mode — no editing UI
showToolbar
boolean
true
Show formatting toolbar
author
string
'User'
Author name for comments and tracked 
changes
onChange
function
—
Called on every document change
onSave
function
—
Called on save, receives ArrayBuffer
onError
function
—
Called on error
```

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

### DocxEditor Ref Methods

Source: https://docx-editor.dev

Methods available through the DocxEditor's ref object for programmatic control of the editor.

```APIDOC
## DocxEditor Ref Methods

### Usage

```javascript
const ref = useRef<DocxEditorRef>(null)
```

### Methods

- **ref.current.save()**: Returns an ArrayBuffer of the .docx.
- **ref.current.getDocument()**: Returns the current document object.
- **ref.current.setZoom(level: number)**: Sets the zoom level (e.g., 1.5 for 150%).
- **ref.current.scrollToPage(pageNumber: number)**: Scrolls to the specified page number.
- **ref.current.print()**: Initiates the print action.
```

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

### Scroll to Specific Page

Source: https://docx-editor.dev

Navigate the editor view to a specified page number. Page numbers are 1-based.

```typescript
ref.current.scrollToPage(3)
```

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

### Save Document with Docx Editor

Source: https://docx-editor.dev

Save the current document to an ArrayBuffer. This method is asynchronous and should be awaited.

```typescript
await ref.current.save()
```

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

### Set Zoom Level

Source: https://docx-editor.dev

Adjust the zoom level of the Docx Editor. Accepts a number representing the zoom percentage.

```typescript
ref.current.setZoom(1.5)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.