@onlyoffice/document-editor- There is no createConnector in react, resulting in the inability to create the connector

[googmiss]

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

function onAppReady(event) {
  console.log("✅ 1", event);
}

interface AppProps {
  documentUrl: string;
  documentTitle: string;
  cellBackUrl: string;
  fileType: string;
  documentType: string;
}

export default function App({documentUrl,documentTitle,cellBackUrl, fileType, documentType}: AppProps) {
  return (
    <DocumentEditor
      id="docxEditor"
      documentServerUrl=""
      config={{
        document: {
          fileType: fileType,
          title: documentTitle,
          url: documentUrl
        },
        documentType: documentType,
        editorConfig: {
          callbackUrl: cellBackUrl,
          customization: {
            autosave: true,
            trackChanges: true
          },
          user: {
            id: "user-123",
            name: "React User",
          }
        },
      }}
      events_onAppReady={onAppReady}
      events_onInfo= {onInfo}
      events_onMetaChange={onMetaChange}
      events_onDocumentReady={onDocumentReady}
      onLoadComponentError={onLoadComponentError}
    />
  )
}

output event:
attachMouseEvents
blurFocus
createEmbedWorker
denyEditingRights
destroyEditor
detachMouseEvents
downloadAs
grabFocus
insertImage
openDocument
processMailMerge
processRightsChange
processSaveResult
refreshHistory
requestClose
serviceCommand
setActionLink
setEmailAddresses
setFavorite
setHistoryData
setMailMergeRecipients
setReferenceData
setReferenceSource
setRequestedDocument
setRequestedSpreadsheet
setRevisedFile
setSharingSettings
setUsers
showMessage
showSharingSettings
startFilling

For example, I use the DocumentEditor component. In onAppReady, I find that there is no createConnector method. Could you please tell me how to create the connector

only office serve: v8.1
The deployment method of only office is docker

docker-compose.yml:

version: '3.3'
services:
onlyoffice:
image: onlyoffice/documentserver:8.1
container_name: onlyoffice
volumes:

• ./onlyoffice/log:/var/log/onlyoffice
• ./onlyoffice/data:/var/www/onlyoffice/Data
• ./onlyoffice/lib:/var/lib/onlyoffice
• ./onlyoffice/db:/var/lib/postgresql
  ports:
• 80:80
  environment:
• JWT_ENABLED="true"
  restart: always

[nataliachodelski]

yeah, their documentation on here and the website is abysmal. I haven't found their react documentation helpful at all, the examples are too simplistic.

anyway, @googmiss, here is a simple example of how I got the connector working (in react typescript app):

I dont use any imports from OnlyOffice - rather, you need to create type interfaces to match the DocumentEditor APi, connector API, and other types and it just works. Obviously you need to have a backend handling the callbacks and sending an editor config json payload matching the spec shown in the documentation

Type interfaces:

/**
 * OnlyOffice DocEditor instance returned by DocsAPI.DocEditor constructor
 */
export interface DocEditorInstance {
  createConnector: () => ConnectorInstance;
  destroyEditor: () => void;
  downloadAs: (format?: string) => void;
 // add other method interfaces as needed, like 'setUsers'
}


/**
 * Connector API instance for 2-way communication (Developer Edition only)
 * @see https://api.onlyoffice.com/docs/docs-api/usage-api/automation-api/
 */
export interface ConnectorInstance {
  /**
   * Execute a Document Builder script command
   * @param command - Function containing Document Builder API calls
   * @param recalculate - Whether to recalculate the document after execution
   * @param isAsync - Whether to execute asynchronously
   * @param callback - Callback function to receive the result
   * @param args - Arguments to pass to the command function
   */
  callCommand: (
    command: (...args: unknown[]) => unknown,
    recalculate?: boolean,
    isAsync?: boolean,
    callback?: (result: unknown) => void,
    args?: unknown[]
  ) => void;

  /**
   * Execute a specific editor method
   * @param method - Method name to execute
   * @param args - Arguments to pass to the method
   * @param callback - Callback function to receive the result
   */
  executeMethod: (
    method: string,
    args: unknown[],
    callback?: (result: unknown) => void
  ) => void;

  /**
   * Attach an event listener
   * @param eventName - Name of the event to listen for
   * @param callback - Callback function to handle the event
   */
  attachEvent: (
    eventName: string,
    callback: (data: unknown) => void
  ) => void;

  /**
   * Detach an event listener
   * @param eventName - Name of the event to stop listening for
   */
  detachEvent: (eventName: string) => void;

  /**
   * Add custom context menu items
   */
  addContextMenuItem: (items: ContextMenuItem[]) => void;

  /**
   * Update an existing context menu item
   * @param id - ID of the menu item to update
   * @param options - Options to update (disabled, text, icon)
   * @returns void
   */
  updateContextMenuItem: (id: string, options: { disabled?: boolean; text?: string; icon?: string }) => void;

  /**
   * Add custom toolbar menu items.
   * Accepts either a flat array (legacy) or a tab-based structure that can add multiple custom tabs to the top ribbon tabs.
   */
  addToolbarMenuItem: (items: ToolbarMenuItem[] | ToolbarMenuMainItem) => void;

  /**
   * Connect to the editor (if previously disconnected)
   */
  connect: () => void;

  /**
   * Disconnect from the editor
   */
  disconnect: () => void;
}

/**
 * Context menu item configuration
 * options: https://github.com/ONLYOFFICE/api.onlyoffice.com/blob/4e9cb59929e64ea1a3389ace2b98cab081992c24/site/docs/docs-api/usage-api/automation-api.md?plain=1#L33
 */
export interface ContextMenuItem {
  id: string; // id of the menu item, which is used when calling `updateContextMenuItem' to update visibility of the item later
  text: string; // item caption (displayed title of item)
  icons?: string; // optional icon(s), must be in assets folder in subfolder for current theme (e.g., /custom-editor-plugin/resources/light/)
  disabled?: boolean; // whether disabled. if disabled, item is greyed out and not clickable but still shown in ribbon menu
  onClick?: (id: string) => void; //The click event callback.
  /**
   * Array of child items for submenus. i items are provided, the parent item shows a submenu containing the specified child items, rather than acting as a button. If no items are provided, this (the parent item) will be a regular clickable item (or disabled if disabled=true
  */
  items?: ContextMenuItem[];
}

usage

/**
 * OnlyOffice Document Editor component
 * @see https://api.onlyoffice.com/docs/docs-api/usage-api/
 */
export function OnlyOfficeEditor({
  onlyOfficeUrl,
}: OnlyOfficeEditorProps) {

  const dispatch = useStoreDispatch();

  // State
  const [isLayoutReady, setIsLayoutReady] = useState(false);
  const [isScriptLoaded, setIsScriptLoaded] = useState(false);

  const handleModifyTextRef = useRef(() => { });

  // Connector hook, which provides API methods for communicating with the editor (Developer Edition only - will be null in Community Edition)
  const {
    handleModifyText,
  } = useOnlyOfficeConnector(
    connectorRef,
    editorRef,
    dispatch,
  );

  useEffect(() => {
    handleModifyTextRef.current = handleModifyText;
  }, [handleModifyText]);

  // Ref to hold the latest setupConnectorEvents function to avoid stale closures
  // while not triggering editor re-initialization when sectionInformation changes
  const setupConnectorEventsRef = useRef<() => void>(() => { });

  // Setup connector event listeners (defined before useEffect that uses it)
  const setupConnectorEvents = useCallback(() => {
    if (!connectorRef.current) return;

    // example of listen for content control removal (deletion)
    attachEvent('onRemoveContentControl', () => {
     // this function sends a message to our plugin to delete a content control (using plugin to call the OO Document API)
      deleteContentControlAtCursor();
    });

    attachEvent('onContextMenuShow', (options: any) => {
      // options structure: { type: "None" | "Target" | "Selection" | "Image" | "Shape" | "OleObject", header: boolean, footer: boolean, headerArea: boolean, footerArea: boolean }

      const targetType = options?.type || 'unknown'; // possible values: "None" | "Target" | "Selection" | "Image" | "Shape" | "OleObject"
      const hasSelection = targetType === 'Selection';

      // Determine which context menu items to show based on whether selected text
      var menuItems: ContextMenuItem[] = [];
      if (hasSelection) {
        // only show "Modify text" when right-clicking selected text (not just cursor in section)
        const modifyTextMenuItem: ContextMenuItem = {
          id: 'modifyText',
          text: 'Modify selection',
          icons: `/custom-editor-plugin/resources/light/modify_text.svg`,
          onClick: () => {
            handleModifyTextRef.current();
          },
        };
        menuItems.push(modifyTextMenuItem);
      }
     
      // Add context menu items via connector API
      if (connectorRef.current) {
        console.log('[OnlyOfficeEditor] Adding context menu');
        connectorRef.current.addContextMenuItem(menuItems);
      } else {
        console.error('[OnlyOfficeEditor] connectorRef is null, cannot add context menu items');
      }
    });
  }, [attachEvent]);

  // Keep ref in sync with latest callback
  useEffect(() => {
    setupConnectorEventsRef.current = setupConnectorEvents;
  }, [setupConnectorEvents]);

  // Load OnlyOffice API script
  useEffect(() => {
    // Check if script is already loaded
    if (window.DocsAPI) {
      setIsScriptLoaded(true);
      return;
    }

    const script = document.createElement('script');
    script.src = `${onlyOfficeUrl}/web-apps/apps/api/documents/api.js`;
    script.async = true;
    script.onload = () => {
      setIsScriptLoaded(true);
    };
    script.onerror = (error) => {
      console.error('Failed to load OnlyOffice API script:', error);
    };
    document.head.appendChild(script);

    return () => {
      // Don't remove the script on unmount - it may be reused
    };
  }, [onlyOfficeUrl]);

  // Set layout ready after mount
  useEffect(() => {
    setIsLayoutReady(true);
    return () => setIsLayoutReady(false);
  }, []);

  // Initialize editor when ready
  useEffect(() => {
    if (!isLayoutReady || !isScriptLoaded || !window.DocsAPI || !containerRef.current) {
      return;
    }

    // Don't re-initialize if already created
    if (editorRef.current) {
      return;
    }

    // Track if we're still mounted
    let isMounted = true;

    // Fetch signed config from backend and initialize editor
    async function initializeEditor() {
      try {
        // Fetch JWT-signed config from backend API (frontendapi)
        const serverConfig: BackendConfig = await FetchOnlyOfficeConfigApi({
          documentId: getDocumentId,
          mode: edit,
        });

        // Check if still mounted
        if (!isMounted) return;


        // Add client-side event handlers (can't be serialized in API response)
        const config: OnlyOfficeConfig = {
          ...serverConfig,
          events: {
            onAppReady: () => { },
            onDocumentReady: () => {
              // Create connector for 2-way communication (Developer Edition only)
              if (editorRef.current) {
                try {
                  connectorRef.current = editorRef.current.createConnector();
                  // Use ref to get latest function without triggering useEffect re-run
                  setupConnectorEventsRef.current();
                } catch (error) {
                  console.error('Failed to create Connector (requires Developer Edition):', error);
                }
              }
            },
            onError: (event) => {
              console.error('OnlyOffice error:', event.data);
            },
          },
        };
        // Initialize the editor (DocsAPI verified in useEffect guard)
        editorRef.current = new window.DocsAPI!.DocEditor('onlyoffice-editor-container', config);
      } catch (error) {
        console.error('Failed to initialize OnlyOffice editor:', error);
      }
    }

    initializeEditor();

    // Cleanup on unmount
    return () => {
      isMounted = false;
      if (editorRef.current) {
        try {
          editorRef.current.destroyEditor();
        } catch (error) {
          console.error('Error destroying editor:', error);
        }
        editorRef.current = null;
        connectorRef.current = null;
      }
    };
    // Note: setupConnectorEvents is  intentionally NOT in dependencies - use a ref to avoid repeated editor re-initializations
  }, [isLayoutReady, isScriptLoaded, getDocumentId]);