### Start Storybook

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Start the Storybook development server.

```bash
npm run storybook
```

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

### Install serve globally

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Installs the serve package globally to create a static server for deploying the demo application.

```bash
npm install -g serve
```

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

### Install project dependencies

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Install the project dependencies.

```bash
npm install
```

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

### Create and set up the React demo project

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Commands to create a new React project, navigate into it, and install the ONLYOFFICE Docs React component from npm.

```bash
npx create-react-app onlyoffice-react-demo
```

```bash
cd onlyoffice-react-demo
```

```bash
npm install --save @onlyoffice/document-editor-react
```

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

### Start the development server

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Starts the Node.js development server to test the application. Stop it by pressing Ctrl+C in the command line.

```bash
npm run start
```

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

### startFilling()

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Starts filling out ready PDF forms and locks PDF editing. Only callable after the `onRequestStartFilling` event.

```APIDOC
## startFilling()

### Description
Starts filling out ready PDF forms and locks PDF editing. Only callable after the `onRequestStartFilling` event.

### Method
startFilling
```

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

### startFilling method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Starts filling out ready PDF forms and locks PDF editing. Only callable after the onRequestStartFilling event.

```typescript
startFilling(): void;
```

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

### Basic DocumentEditor usage

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocumentEditor.md

Minimal setup for embedding the DocumentEditor component with a document configuration. The component never throws; failures are routed to onLoadComponentError or console with codes -1, -2, -3.

```jsx
import React from "react";
import { DocumentEditor } from "@onlyoffice/document-editor-react";

export default function App() {
  return (
    <DocumentEditor
      id="docxEditor"
      documentServerUrl="http://documentserver/"
      config={{
        document: {
          fileType: "docx",
          key: "Khirz6zTPdfd7",
          title: "Example Document Title.docx",
          url: "https://example.com/url-to-example-document.docx",
        },
        documentType: "word",
        editorConfig: {
          callbackUrl: "https://example.com/url-to-callback.ashx",
        },
      }}
    />
  );
}
```

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

### Script tag setup in _createScriptTag

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/loadScript.md

The created script tag configuration inside _createScriptTag, setting id, type, src, async, and a loading attribute.

```typescript
script.id = id;
script.type = "text/javascript";
script.src = url;
script.async = true;
script.setAttribute("loading", "");
```

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

### Call site of loadScript in DocumentEditor

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/loadScript.md

Example from src/DocumentEditor.tsx:161-164 showing how loadScript is called and handled.

```typescript
loadScript(docsApiUrl, "onlyoffice-api-script")
  .then(() => onLoad())
  .catch(() => onError(-2));
```

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

### Standalone usage example of loadScript

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/loadScript.md

Example for diagnosing load issues, not public API. Shows importing and awaiting loadScript.

```typescript
import loadScript from "./utils/loadScript";

await loadScript("https://documentserver/web-apps/apps/api/documents/api.js", "onlyoffice-api-script");
// after this, window.DocsAPI is available
```

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

### Initiate editor action from events_onRequestHistory

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Shows how to use the registry to get the editor instance inside an event handler, e.g., `events_onRequestHistory`, and call methods like `refreshHistory` with the provided history data.

```ts
// inside events_onRequestHistory:
const editor = window.DocEditor.instances["docxEditor"];
editor.refreshHistory({ currentVersion: 1, history: [{ created: "2010-07-07 3:46 PM", key: "Khirz6zTPdfd7", version: 1 }] });
```

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

### Register onLoadComponentError handler in React

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/errors.md

Example of registering the onLoadComponentError handler prop to catch component load failures. The component never throws across the React boundary, so this prop is the only way to receive error codes -1, -2, and -3. Recovery is not built in; consumers typically retry by toggling the component's mounting after -2.

```jsx
import React from "react";
import { DocumentEditor } from "@onlyoffice/document-editor-react";

const onLoadComponentError = (errorCode, errorDescription) => {
  switch (errorCode) {
    case -1:
      console.error("Unknown error loading component:", errorDescription);
      break;
    case -2:
      console.error("Could not load DocsAPI from the document server:", errorDescription);
      break;
    case -3:
      console.error("DocsAPI is not defined after script load:", errorDescription);
      break;
    default:
      console.error("Unexpected error code", errorCode, errorDescription);
  }
};

export default function App() {
  return (
    <DocumentEditor
      id="docxEditor"
      documentServerUrl="http://documentserver/"
      config={{ /* ... */ }}
      onLoadComponentError={onLoadComponentError}
    />
  );
}
```

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

### Create the package

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Create the package.

```bash
npm pack
```

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

### Serve project folder

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Navigates to the project folder and runs the serve command to serve the project folder.

```bash
cd onlyoffice-react-demo
serve
```

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

### Test the component

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Run the component tests.

```bash
npm run test
```

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

### Build Storybook

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Build the Storybook for the project.

```bash
npm run build-storybook
```

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

### Build the project with Rollup

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Build the project using Rollup.

```bash
npm run rollup
```

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

### Build production app

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Creates a production build of the app in the build directory.

```bash
npm run build
```

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

### Serve static site on port 3000

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Serves the static site on port 3000 by default. Use the -l or --listen flags to adjust the port.

```bash
serve -s build
```

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

### Clone project from GitHub

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Clone the project from the GitHub repository.

```bash
git clone https://github.com/ONLYOFFICE/document-editor-react
```

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

### showMessage(message: string)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Displays a tooltip. Only callable after the `onAppReady` event; not supported in the `embedded` platform type.

```APIDOC
## showMessage(message: string)

### Description
Displays a tooltip. Only callable after the `onAppReady` event; not supported in the `embedded` platform type.

### Method
showMessage

### Parameters
- **message** (string) - Required - The message to display.
```

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

### Building docsApiUrl

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/loadScript.md

Code from src/DocumentEditor.tsx:150-160 that constructs the docsApiUrl including optional shardkey.

```typescript
let url = documentServerUrl;
if (!url.endsWith("/")) url += "/";

let docsApiUrl = `${url}web-apps/apps/api/documents/api.js`;
if (shardkey) {
  if (typeof shardkey === "boolean") {
    docsApiUrl += `?shardkey=${config.document?.key}`;
  } else {
    docsApiUrl += `?shardkey=${shardkey}`;
  }
}
```

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

### Serve static site on custom port 4000

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Serves the static site on port 4000 using the -l flag to adjust the port.

```bash
serve -s build -l 4000
```

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

### showMessage method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Displays a tooltip. Only callable after the onAppReady event; not supported in the embedded platform type.

```typescript
showMessage(message: string): void;
```

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

### Source entry point exports (src/index.ts)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/index.md

Exports the DocumentEditor component and its props type from the package's source entry point.

```TypeScript
export { default as DocumentEditor } from "./DocumentEditor";
export { DocumentEditorProps } from "./DocumentEditor";
```

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

### DocumentEditor with events, error handling, and shard key

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocumentEditor.md

Adds event handlers for document ready, app ready, and load errors. The onLoadComponentError switch handles error codes -1, -2, -3. The shardkey prop is set to "group1".

```jsx
import React from "react";
import { DocumentEditor } from "@onlyoffice/document-editor-react";

export default function App() {
  const onDocumentReady = () => console.log("Document is loaded");

  const onLoadComponentError = (errorCode, errorDescription) => {
    switch (errorCode) {
      case -1: // Unknown error loading component
      case -2: // Error load DocsAPI from http://documentserver/
      case -3: // DocsAPI is not defined
        console.log(errorDescription);
        break;
    }
  };

  const onAppReady = (editor) => {
    // `editor` is the DocEditor instance (window.DocEditor.instances[id])
    console.log("Editor ready", editor);
  };

  return (
    <DocumentEditor
      id="xlsxEditor"
      documentServerUrl="http://documentserver/"
      shardkey="group1"
      config={{
        document: {
          fileType: "xlsx",
          key: "Khirz6zTPdfd7",
          title: "Example Spreadsheet.xlsx",
          url: "https://example.com/url-to-example-spreadsheet.xlsx",
        },
        documentType: "cell",
      }}
      onLoadComponentError={onLoadComponentError}
      events_onAppReady={onAppReady}
      events_onDocumentReady={onDocumentReady}
    />
  );
}
```

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

### React to events_onAppReady with DocumentEditor

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Basic usage showing how to handle the `events_onAppReady` event. The callback receives the editor instance and can call methods like `showMessage`. The component is rendered with the `events_onAppReady` prop.

```jsx
const onAppReady = (editor) => {
  if (editor && typeof editor.showMessage === "function") {
    editor.showMessage("Welcome!");
  }
};

<DocumentEditor id="e" documentServerUrl="http://documentserver/" config={config} events_onAppReady={onAppReady} />
```

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

### EditorConfigBase interface

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/types.md

Represents the base editor configuration with language, region, mode, callback URL, user info, and WOPI settings. callbackUrl is required.

```ts
export interface EditorConfigBase {
    lang?: Lang;
    region?: Region;
    mode?: "edit" | "view";
    callbackUrl: string;
    user?: { id?: string; name?: string; group?: string; image?: string; roles?: string[] };
    wopi?: { FileNameMaxLength?: number };
}
```

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

### Configure App.js with DocumentEditor component

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Replaces the contents of ./src/App.js to create the App component with the ONLYOFFICE Docs editor. Replace the documentServerUrl, document url, and callbackUrl with your own values; the callback URL is required for saving functionality.

```jsx
import React, { useRef } from 'react';
import { DocumentEditor } from "@onlyoffice/document-editor-react";

var onDocumentReady = function (event) {
    console.log("Document is loaded");
};

var onLoadComponentError = function (errorCode, errorDescription) {
    switch(errorCode) {
        case -1: // Unknown error loading component
            console.log(errorDescription);
            break;

        case -2: // Error load DocsAPI from http://documentserver/
            console.log(errorDescription);
            break;

        case -3: // DocsAPI is not defined
            console.log(errorDescription);
            break;
    }
};

export default function App() {
    return (
        <>
            <DocumentEditor
                id="docxEditor"
                documentServerUrl="http://documentserver/"
                config={{
                    "document": {
                        "fileType": "docx",
                        "key": "Khirz6zTPdfd7",
                        "title": "Example Document Title.docx",
                        "url": "https://example.com/url-to-example-document.docx"
                    },
                    "documentType": "word",
                    "editorConfig": {
                        "callbackUrl": "https://example.com/url-to-callback.ashx"
                    },
                    "events": {
                        "onDocumentReady": onDocumentReady
                    }
                }}
                onLoadComponentError={onLoadComponentError}
            />
        </>
    );
}
```

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

### Defensive access to editor instance

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Demonstrates safe access to the editor instance using optional chaining, checking for existence before calling `destroyEditor`. Logs an error if the instance is not found, which can happen before load or after unmount.

```ts
const editor = window.DocEditor?.instances?.[id];
if (editor) {
  editor.destroyEditor();
} else {
  console.error("Editor instance not found for", id);
}
```

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

### DocumentEditor Props

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Documentation for the DocumentEditor React component props, which are the configuration options users can pass to the component.

```APIDOC
## [PROPS] DocumentEditor

### Description
Props for the DocumentEditor React component. These are the configuration options that can be passed to the component when using it in a React application.

### Parameters
#### Props
- **id** (string) - Required - Component unique identifier.
- **documentServerUrl** (string) - Required - Address of ONLYOFFICE Document Server.
- **shardkey** (string | boolean) - Optional - Default: true - The string or boolean parameter required to request load balancing during collaborative editing: all users editing the same document are served by the same server.
- **config** (object) - Required - Generic configuration object for opening a file with token.
- **onLoadComponentError** ((errorCode: number, errorDescription: string) => void) - Optional - Default: null - The function called when an error occurs while loading a component.

### Response
No response value. This is a component prop definition.
```

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

### downloadAs method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Downloads the edited file. Only callable when the onDownloadAs event is declared; the service asynchronously creates the file and fires that event with a link.

```typescript
downloadAs(format?: string): void;
```

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

### Window augmentation

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/types.md

Global type augmentation for the Window interface, providing types for the DocsAPI and editor instance registry.

```APIDOC
## Window augmentation

### Description
Global type augmentation for the `Window` interface, providing types for the DocsAPI and editor instance registry.

### Type
`declare global { interface Window { ... } }`

### Properties
- **DocsAPI.DocEditor** (`(id: string, config: Config) => DocEditor`) - Editor factory provided by the loaded DocsAPI; the component calls it during `onLoad`
- **DocEditor.instances** (`Record<string, DocEditor | undefined>`) - Registry of live editor instances keyed by component `id`

### Example
```ts
declare global {
  interface Window {
    DocsAPI?: {
      DocEditor: (id: string, config: Config) => DocEditor;
    };
    DocEditor?: {
      instances: Record<string, DocEditor | undefined>;
    };
  }
}
```
```

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

### DocEditor class constructor

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Constructor signature for the DocEditor instance: takes an element ID and a Config object. The component calls this with window.DocsAPI.DocEditor(id, initConfig). Avoid constructing a second instance for an already-initialized ID.

```typescript
constructor(id: string, config: Config);
```

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

### Global Window augmentation for DocsAPI and DocEditor

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/types.md

Augments the global Window interface to type the DocsAPI factory and the DocEditor instance registry. The component calls window.DocsAPI.DocEditor during onLoad and uses window.DocEditor.instances to track live editors by component id.

```ts
declare global {
  interface Window {
    DocsAPI?: {
      DocEditor: (id: string, config: Config) => DocEditor;
    };
    DocEditor?: {
      instances: Record<string, DocEditor | undefined>;
    };
  }
}
```

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

### Set document server URL in config/default.json

Source: https://github.com/onlyoffice/document-editor-react/blob/master/README.md

Change the address of the document server in the config/default.json file.

```json
"documentServerUrl": "http://documentserver/"
```

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

### Container-driven re-init with useEffect

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Shows a React effect that destroys the editor instance when a dependency (`key`) changes, matching the component's lifecycle. Uses optional chaining and try/catch for safe cleanup.

```jsx
useEffect(() => {
  const editor = window.DocEditor?.instances?.[id];
  if (!editor) return;
  try {
    editor.destroyEditor();
  } catch (err) {
    console.error("Failed to destroy editor", err);
  }
}, [key]);
```

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

### setHistoryData(options: SetHistoryDataOptions)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Sends the link for viewing version history. Must be called after `onRequestHistoryData`.

```APIDOC
## setHistoryData(options: SetHistoryDataOptions)

### Description
Sends the link for viewing version history. Must be called after `onRequestHistoryData`; a `token` must be added to validate parameters.

### Method
setHistoryData

### Parameters
- **options** (SetHistoryDataOptions) - Required - Options for setting history data.
```

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

### createConnector()

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Creates the connector for interacting with documents from the outside. Available only in the ONLYOFFICE Docs Developer edition.

```APIDOC
## createConnector()

### Description
Creates the connector for interacting with documents from the outside. Available only in the ONLYOFFICE Docs Developer edition.

### Method
createConnector

### Returns
- **object** - The connector object.

### Notes
- Returns an `object` connector.
- Available only in the Developer edition.
```

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

### downloadAs(format?: string)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Downloads the edited file. Only callable when the `onDownloadAs` event is declared.

```APIDOC
## downloadAs(format?: string)

### Description
Downloads the edited file. Only callable when the `onDownloadAs` event is declared; the service asynchronously creates the file and fires that event with a link.

### Method
downloadAs

### Parameters
- **format** (string) - Optional - The format to download. Defaults to the file's own OOXML format.
```

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

### DocumentEditor Component

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocumentEditor.md

Documentation for the DocumentEditor React component, including its props and event callbacks.

```APIDOC
## DocumentEditor Component

### Description

The `DocumentEditor` component is the only component exported by `@onlyoffice/document-editor-react` at the package top level. It is a stateless React component that renders a `<div>` element with a given `id`, to which the DocsAPI later binds the editor.

### Import

```ts
import { DocumentEditor } from "@onlyoffice/document-editor-react";
```

### Signature

```ts
const DocumentEditor = (props: DocumentEditorProps) => {
```

### Props

#### Required Props

- **id** (string) - The unique identifier for the editor container element.
- **documentServerUrl** (string) - The URL of the Document Server.
- **config** (Config) - The configuration object for the editor (type from `@onlyoffice/doceditor-types`).

#### Optional Props

- **shardkey** (string | boolean) - Optional shard key for the editor.
- **document_fileType** (string) - The file type of the document.
- **document_title** (string) - The title of the document.
- **documentType** (string) - The type of the document (e.g., 'word', 'cell', 'slide').
- **editorConfig_lang** (string) - The language of the editor interface.
- **height** (string) - The height of the editor container.
- **type** (string) - The type of the editor (e.g., 'embedded', 'desktop').
- **width** (string) - The width of the editor container.
- **onLoadComponentError** ((errorCode: number, errorDescription: string) => void) - Callback for component load errors.

#### Event Callback Props

All event callbacks accept an `event` object as their only argument.

- **events_onAppReady** ((event: object) => void) - Triggered when the application is ready.
- **events_onDocumentStateChange** ((event: object) => void) - Triggered when the document state changes.
- **events_onMetaChange** ((event: object) => void) - Triggered when document metadata changes.
- **events_onDocumentReady** ((event: object) => void) - Triggered when the document is ready.
- **events_onInfo** ((event: object) => void) - Triggered when information is available.
- **events_onWarning** ((event: object) => void) - Triggered when a warning occurs.
- **events_onError** ((event: object) => void) - Triggered when an error occurs.
- **events_onRequestSharingSettings** ((event: object) => void) - Triggered when sharing settings are requested.
- **events_onRequestRename** ((event: object) => void) - Triggered when a rename is requested.
- **events_onMakeActionLink** ((event: object) => void) - Triggered when an action link is made.
- **events_onRequestInsertImage** ((event: object) => void) - Triggered when inserting an image is requested.
- **events_onRequestSaveAs** ((event: object) => void) - Triggered when saving as is requested.
- **events_onRequestMailMergeRecipients** ((event: object) => void) - Deprecated since 7.5, use `events_onRequestSelectSpreadsheet`.
- **events_onRequestCompareFile** ((event: object) => void) - Deprecated since 7.5, use `events_onRequestSelectDocument`.
- **events_onRequestEditRights** ((event: object) => void) - Triggered when edit rights are requested.
- **events_onRequestHistory** ((event: object) => void) - Triggered when history is requested.
- **events_onRequestHistoryClose** ((event: object) => void) - Triggered when history close is requested.
- **events_onRequestHistoryData** ((event: object) => void) - Triggered when history data is requested.
- **events_onRequestRefreshFile** ((event: object) => void) - Triggered when refreshing the file is requested.
- **events_onRequestRestore** ((event: object) => void) - Triggered when restoring is requested.
- **events_onRequestSelectSpreadsheet** ((event: object) => void) - Triggered when selecting a spreadsheet is requested.
- **events_onRequestSelectDocument** ((event: object) => void) - Triggered when selecting a document is requested.
- **events_onRequestUsers** ((event: object) => void) - Triggered when users are requested.

### Render Output

Renders a `<div id={id}></div>` element. The DocsAPI later binds the editor to that element, located by `id`.

### Source

- **Source file**: `src/DocumentEditor.tsx` (component at line 82; re-exported from `src/index.ts:17`)
- **Kind**: Arrow-function React component (not a class). Stateless — all logic is in `useEffect` hooks.
```

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

### createConnector method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Creates the connector for interacting with documents from the outside. Available only in the ONLYOFFICE Docs Developer edition. Returns an object.

```typescript
createConnector(): object;
```

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

### DocumentEditor Component

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocumentEditor.md

Documentation for the DocumentEditor React component, including all props and event mappings.

```APIDOC
## DocumentEditor Component

### Description
React component that embeds the ONLYOFFICE Document Editor. It loads the DocsAPI script from the Document Server and initializes the editor with the provided configuration.

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `id` | `string` | yes | — | Unique identifier; used as the DOM element `id` and as the registry key in `window.DocEditor.instances`. |
| `documentServerUrl` | `string` | yes | — | Base address of the ONLYOFFICE Document Server. Trailing `/` is appended if missing. DocsAPI is loaded from `{url}web-apps/apps/api/documents/api.js`. |
| `shardkey` | `string \| boolean` | no | `true` | Load-balancing shard key. `true` (boolean) → uses `config.document?.key`; string → used verbatim; `false` → no `?shardkey=` query parameter at all. |
| `config` | `Config` | yes | — | Generic editor configuration (document, editorConfig, events, documentType, height, type, width, token; see [types.md](../types.md)). Deep-cloned before use. |
| `document_fileType` | `string` | no | — | Overlay value mapped to `document.fileType` in the init config. Present in `config.document.fileType` always wins (see merge order). |
| `document_title` | `string` | no | — | Overlay value written to `document.document_title` in the init config. Note: the `Config` type field is `document.title`, so this is written under the `document_title` key verbatim. |
| `documentType` | `string` | no | — | Overlay value for top-level `documentType` in the init config. |
| `editorConfig_lang` | `string` | no | — | Overlay value mapped to `editorConfig.lang` in the init config. |
| `height` | `string` | no | — | Overlay value for top-level `height` (any CSS-compatible size). |
| `type` | `string` | no | — | Overlay value for top-level `type` (e.g. `desktop`, `mobile`, `embedded`). |
| `width` | `string` | no | — | Overlay value for top-level `width` (any CSS-compatible size). |
| `onLoadComponentError` | `(errorCode: number, errorDescription: string) => void` | no | — | Called when component loading fails. Codes: `-1` unknown, `-2` DocsAPI load failure, `-3` DocsAPI not defined. If omitted, errors are written via `console.error`. |
| `events_onAppReady` | `(event: object) => void` | no | — | Wired to `events.onAppReady`; invoked with `window.DocEditor.instances[id] || {}` — i.e. the `DocEditor` instance. Other `events_*` props are wired 1:1 to `events.<camelCase name>` (see table below). |

### Event prop → config `events` key mapping

| Prop | Config `events` key |
|------|---------------------|
| `events_onAppReady` | `onAppReady` |
| `events_onDocumentStateChange` | `onDocumentStateChange` |
| `events_onMetaChange` | `onMetaChange` |
| `events_onDocumentReady` | `onDocumentReady` |
| `events_onInfo` | `onInfo` |
| `events_onWarning` | `onWarning` |
| `events_onError` | `onError` |
| `events_onRequestSharingSettings` | `onRequestSharingSettings` |
| `events_onRequestRename` | `onRequestRename` |
| `events_onMakeActionLink` | `onMakeActionLink` |
| `events_onRequestInsertImage` | `onRequestInsertImage` |
| `events_onRequestSaveAs` | `onRequestSaveAs` |
| `events_onRequestMailMergeRecipients` | `onRequestMailMergeRecipients` |
| `events_onRequestCompareFile` | `onRequestCompareFile` |
| `events_onRequestEditRights` | `onRequestEditRights` |
| `events_onRequestHistory` | `onRequestHistory` |
| `events_onRequestHistoryClose` | `onRequestHistoryClose` |
| `events_onRequestHistoryData` | `onRequestHistoryData` |
| `events_onRequestRefreshFile` | `onRequestRefreshFile` |
| `events_onRequestRestore` | `onRequestRestore` |
| `events_onRequestSelectSpreadsheet` | `onRequestSelectSpreadsheet` |
| `events_onRequestSelectDocument` | `onRequestSelectDocument` |
| `events_onRequestUsers` | `onRequestUsers` |
```

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

### setActionLink(link: string)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Sets the bookmark link. Must be called after the `onMakeActionLink` event.

```APIDOC
## setActionLink(link: string)

### Description
Sets the bookmark link. Must be called after the `onMakeActionLink` event.

### Method
setActionLink

### Parameters
- **link** (string) - Required - The bookmark link to set.
```

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

### ConfigNormal and BaseConfig interfaces

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/types.md

Shows the base configuration fields and the normal (non-embedded) variant. BaseConfig includes platform type, dimensions, document type, and an optional JWT token.

```ts
export interface ConfigNormal extends BaseConfig {
    document?: DocumentNormal;
    editorConfig?: EditorConfigNormal;
    events?: EventsNormal;
}

export interface BaseConfig {
    type?: PlatformType;        // default "desktop"
    width?: string;             // default "100%"
    height?: string;            // default "100%"
    documentType?: DocumentType;
    token?: string;
}
```

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

### Import DocumentEditor from @onlyoffice/document-editor-react

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocumentEditor.md

Import the DocumentEditor component from the package top level.

```typescript
import { DocumentEditor } from "@onlyoffice/document-editor-react";
```

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

### insertImage(options: InsertImageOptions)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Inserts an image. Must be called after the `onRequestInsertImage` event.

```APIDOC
## insertImage(options: InsertImageOptions)

### Description
Inserts an image. Must be called after the `onRequestInsertImage` event.

### Method
insertImage

### Parameters
- **options** (InsertImageOptions) - Required - Options for inserting the image. See types.md for fields: `c`, `images[]`, `fileType?`, `token?`, `url?`.
```

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

### DocEditor class

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/types.md

Main class for the document editor with constructor and 21 methods.

```APIDOC
## `DocEditor` class

### Description
Main class for the document editor. Constructor takes an id and config. Provides 21 methods for editor control.

### Constructor
- `constructor(id: string, config: Config)` - Creates a new editor instance.

### Methods
- `createConnector` - Creates a connector.
- `denyEditingRights` - Denies editing rights.
- `destroyEditor` - Destroys the editor.
- `downloadAs` - Downloads the document as a specific format.
- `insertImage` - Inserts an image.
- `refreshFile` - Refreshes the file.
- `refreshHistory` - Refreshes the history.
- `requestClose` - Requests to close the editor.
- `setActionLink` - Sets an action link.
- `setFavorite` - Sets favorite status.
- `setHistoryData` - Sets history data.
- `setMailMergeRecipients` - Sets mail merge recipients.
- `setReferenceData` - Sets reference data.
- `setReferenceSource` - Sets reference source.
- `setRequestedDocument` - Sets requested document.
- `setRequestedSpreadsheet` - Sets requested spreadsheet.
- `setRevisedFile` - Sets revised file.
- `setSharingSettings` - Sets sharing settings.
- `setUsers` - Sets users.
- `showMessage` - Shows a message.
- `startFilling` - Starts filling.

Full method signatures: [api-reference/DocEditor.md](api-reference/DocEditor.md).
```

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

### DocumentBase, DocumentNormal, and DocumentEmbedded interfaces

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/types.md

Defines the document configuration. DocumentBase requires url and key; DocumentNormal adds optional metadata, permissions, and form flag. DocumentEmbedded is an empty extension of DocumentBase.

```ts
export interface DocumentBase {
    title?: string;       // default "Unnamed.{fileType}", max 128 chars
    url: string;          // absolute URL of the source document
    fileType?: FileType;  // inferred from documentType if omitted
    key: string;          // unique document id, max 128 chars
}

export interface DocumentNormal extends DocumentBase {
    options?: Record<string, unknown>;      // not in public documentation
    referenceData?: ReferenceData;
    info?: { owner?: string; folder?: string; uploaded?: string;
             sharingSettings?: SharingSetting[]; favorite?: boolean };
    permissions?: DocumentPermissions;
    isForm?: boolean;
}
export interface DocumentEmbedded extends DocumentBase {}
```

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

### refreshFile(config: Config)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Updates the file version without reloading the editor. Must be called after the `onRequestRefreshFile` event.

```APIDOC
## refreshFile(config: Config)

### Description
Updates the file version without reloading the editor. Must be called after the `onRequestRefreshFile` event.

### Method
refreshFile

### Parameters
- **config** (Config) - Required - The configuration for the file refresh.
```

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

### DocEditor constructor

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

The DocEditor constructor creates a new editor instance in the specified HTML element with the given configuration. It is called by the DocumentEditor component via window.DocsAPI.DocEditor(id, initConfig).

```APIDOC
## Constructor

```ts
constructor(id: string, config: Config);
```

### Description
Creates a new editor instance in the specified HTML element with the given configuration.

### Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `id` | `string` | yes | ID of the HTML element to place the editor into |
| `config` | `Config` | yes | Editor initialization configuration |

### Usage

```ts
const editor = window.DocsAPI.DocEditor(id, initConfig);
```
```

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

### setHistoryData method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Sends the link for viewing version history. Must be called after onRequestHistoryData; a token must be added to validate parameters.

```typescript
setHistoryData(options: SetHistoryDataOptions): void;
```

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

### _createScriptTag internal helper signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/loadScript.md

Internal helper at line 56 of src/utils/loadScript.ts used to create and configure the script tag.

```typescript
const _createScriptTag = (id: string, url: string, resolve: (value: unknown) => void, reject: (reason?: any) => void) => {
```

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

### Method option interfaces

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/types.md

Interfaces defining options for various editor methods.

```APIDOC
## Method option interfaces

### Description
Interfaces defining options for various editor methods.

### `InsertImageOptions`
- `c: "add" | "change" | "fill" | "watermark" | "slide"` - Required - Insert mode.
- `images: { fileType: "bmp"|"gif"|"jpe"|"jpeg"|"jpg"|"png"|"tif"|"tiff"; url: string }[]` - Required - Array of images.
- `fileType?` - Optional - File type.
- `token?` - Optional - Token.
- `url?` - Optional - URL.

### `RefreshHistoryOptions`
- `currentVersion?: number` - Optional - Current version.
- `error?: string` - Optional - Error message.
- `history?: { changes?: object; created: string; key: string; serverVersion?: number; user?: { id: string; name: string }; version?: number }[]` - Optional - History array.

### `SetHistoryDataOptions`
- `changesUrl: string` - Required - URL to changes.
- `fileType: string` - Required - File type.
- `key: string` - Required - Key.
- `previous: { fileType: string; key: string; url: string }` - Required - Previous file info.
- `token?: string` - Optional - Token.
- `url?: string` - Optional - URL.
- `version: number` - Required - Version.

### `SetReferenceDataOptions`
- `referenceData?: ReferenceData` - Optional - Reference data.
- `path?: string` - Optional - Path.
- `url?: string` - Optional - URL.

### `SetRequestedDocumentOptions`
- `fileType: string` - Required - File type.
- `token?: string` - Optional - Token.
- `url: string` - Required - URL.

### `SetRequestedSpreadsheetOptions`
- `fileType: string` - Required - File type.
- `token?: string` - Optional - Token.
- `url: string` - Required - URL.

### `SetSharingSettingsOptions`
- `sharingSettings: SharingSetting[]` - Required - Sharing settings array.

### `SetUsersOptions`
- `users: { email?: string; id?: string; image?: string; name?: string }[]` - Required - Array of users.
```

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

### refreshHistory method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Shows document version history. Must be called after the onRequestHistory event. Options: currentVersion?, error?, history[] (changes?, created, key, serverVersion?, user?, version?).

```typescript
refreshHistory(options: RefreshHistoryOptions): void;
```

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

### setActionLink method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Sets the bookmark link. Must be called after the onMakeActionLink event.

```typescript
setActionLink(link: string): void;
```

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

### DocumentEditor component signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocumentEditor.md

The arrow-function component signature that accepts DocumentEditorProps.

```typescript
const DocumentEditor = (props: DocumentEditorProps) => {
```

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

### refreshHistory(options: RefreshHistoryOptions)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Shows document version history. Must be called after the `onRequestHistory` event.

```APIDOC
## refreshHistory(options: RefreshHistoryOptions)

### Description
Shows document version history. Must be called after the `onRequestHistory` event.

### Method
refreshHistory

### Parameters
- **options** (RefreshHistoryOptions) - Required - Options for refreshing history. Fields: `currentVersion?`, `error?`, `history[]` (`changes?`, `created`, `key`, `serverVersion?`, `user?`, `version?`).
```

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

### setSharingSettings(options: SetSharingSettingsOptions)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Updates sharing settings after the `onRequestSharingSettings` event.

```APIDOC
## setSharingSettings(options: SetSharingSettingsOptions)

### Description
Updates sharing settings after the `onRequestSharingSettings` event.

### Method
setSharingSettings

### Parameters
- **options** (SetSharingSettingsOptions) - Required - Options for sharing settings.
```

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

### setRequestedDocument(options: SetRequestedDocumentOptions)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Selects a document for comparing/combining/inserting text after `onRequestSelectDocument`.

```APIDOC
## setRequestedDocument(options: SetRequestedDocumentOptions)

### Description
Selects a document for comparing/combining/inserting text after `onRequestSelectDocument`.

### Method
setRequestedDocument

### Parameters
- **options** (SetRequestedDocumentOptions) - Required - Options for the requested document.
```

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

### setRevisedFile(options: { fileType: string; token?: string; url: string })

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Deprecated since 7.5 — use `setRequestedDocument`. Selects a document for comparing after `onRequestCompareFile` (Enterprise/Developer editions only).

```APIDOC
## setRevisedFile(options: { fileType: string; token?: string; url: string })

### Description
Deprecated since 7.5 — use `setRequestedDocument`. Selects a document for comparing after `onRequestCompareFile` (Enterprise/Developer editions only).

### Method
setRevisedFile

### Parameters
- **options** (object) - Required - Options for the revised file.
  - **fileType** (string) - Required - The file type.
  - **token** (string) - Optional - The token.
  - **url** (string) - Required - The URL.
```

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

### insertImage method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Inserts an image. Must be called after the onRequestInsertImage event. InsertImageOptions fields: c, images[], fileType?, token?, url?.

```typescript
insertImage(options: InsertImageOptions): void;
```

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

### refreshFile method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Updates the file version without reloading the editor. Must be called after the onRequestRefreshFile event.

```typescript
refreshFile(config: Config): void;
```

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

### setUsers(options: SetUsersOptions)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Sets users to mention in comments, grants range-edit access rights, or sets avatars after the `onRequestUsers` event.

```APIDOC
## setUsers(options: SetUsersOptions)

### Description
Sets users to mention in comments, grants range-edit access rights, or sets avatars after the `onRequestUsers` event.

### Method
setUsers

### Parameters
- **options** (SetUsersOptions) - Required - Options for setting users.
```

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

### destroyEditor()

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Destroys the editor instance. Used when re-initializing with other configurations.

```APIDOC
## destroyEditor()

### Description
Destroys the editor instance. Used when re-initializing with other configurations. The component calls it during re-init and on unmount.

### Method
destroyEditor
```

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

### Access editor instance via window.DocEditor.instances

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocumentEditor.md

Accesses the underlying DocEditor instance from the global registry by id. The instance is only valid while the component is mounted because the component calls destroyEditor() on unmount and clears the slot.

```jsx
// after the editor has initialized:
const editor = window.DocEditor.instances["docxEditor"];
editor.downloadAs("pdf"); // DocEditor method from @onlyoffice/doceditor-types
```

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

### loadScript declaration as imported

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/loadScript.md

The type declaration of loadScript when imported, showing its parameters and return type.

```typescript
const loadScript: (url: string, id: string) => Promise<unknown>
```

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

### requestClose()

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Requests editor close. Recommended before `destroyEditor()` to check for unsaved data.

```APIDOC
## requestClose()

### Description
Requests editor close. Recommended before `destroyEditor()` to check for unsaved data.

### Method
requestClose
```

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

### setFavorite(favorite: boolean)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Changes the *Favorite* icon state. Must be called after the `onMetaChange` event.

```APIDOC
## setFavorite(favorite: boolean)

### Description
Changes the *Favorite* icon state. Must be called after the `onMetaChange` event.

### Method
setFavorite

### Parameters
- **favorite** (boolean) - Required - The new favorite state.
```

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

### setUsers method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Sets users to mention in comments, grants range-edit access rights, or sets avatars after the onRequestUsers event.

```typescript
setUsers(options: SetUsersOptions): void;
```

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

### setReferenceSource(options: SetReferenceDataOptions)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Changes a source of external data after the `onRequestReferenceSource` event.

```APIDOC
## setReferenceSource(options: SetReferenceDataOptions)

### Description
Changes a source of external data after the `onRequestReferenceSource` event.

### Method
setReferenceSource

### Parameters
- **options** (SetReferenceDataOptions) - Required - Options for the reference source.
```

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

### setReferenceData(options: SetReferenceDataOptions)

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Refreshes data by a reference link. Must be called after `onRequestReferenceData` (Developer edition only).

```APIDOC
## setReferenceData(options: SetReferenceDataOptions)

### Description
Refreshes data by a reference link (`referenceData`, `path`, or `link`). Must be called after `onRequestReferenceData` (Developer edition only).

### Method
setReferenceData

### Parameters
- **options** (SetReferenceDataOptions) - Required - Options for reference data.
```

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

### loadScript function signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/loadScript.md

The default export of src/utils/loadScript.ts at line 17. Asynchronous function that accepts a URL and an id, returning a Promise.

```typescript
const loadScript = async (url: string, id: string) => {
```

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

### Config interface from @onlyoffice/doceditor-types

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/types.md

Defines the top-level configuration object passed to the ONLYOFFICE Document Editor React component. It extends ConfigNormal and adds embedded variants for document, editorConfig, and events.

```ts
export interface Config extends ConfigNormal {
    document?: DocumentNormal & DocumentEmbedded;
    editorConfig?: EditorConfigNormal & EditorConfigEmbedded;
    events?: EventsNormal & EventsEmbedded;
}
```

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

### setRequestedDocument method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Selects a document for comparing/combining/inserting text after onRequestSelectDocument.

```typescript
setRequestedDocument(options: SetRequestedDocumentOptions): void;
```

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

### setSharingSettings method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Updates sharing settings after the onRequestSharingSettings event.

```typescript
setSharingSettings(options: SetSharingSettingsOptions): void;
```

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

### requestClose method signature

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/DocEditor.md

Requests editor close. Recommended before destroyEditor() to check for unsaved data.

```typescript
requestClose(): void;
```

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

### loadScript return new Promise body

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/api-reference/loadScript.md

The body of loadScript creates and returns a new Promise for script loading.

```typescript
return new Promise((resolve, reject) => { ... });
```

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

### Handle editor runtime errors with events_onError

Source: https://github.com/onlyoffice/document-editor-react/blob/master/_autodocs/errors.md

Attach a handler to the editor's runtime errors via the events_onError prop. The event object may have title and description fields; the handler logs the description or falls back to the title.

```jsx
<DocumentEditor
  id="docxEditor"
  documentServerUrl="http://documentserver/"
  config={config}
  events_onError={(event) => console.log("Editor error:", event.description ?? event.title)}
/>
```