Editor Buttons Module

This module allows adding buttons to the Editor that act on another module of the same app.

Editor button locations:

• header-right: the upper-right corner of the Editor header
• header-left: the upper-left corner of the Editor header
• menu: the Apps menu in the Editor’s main menu
• translation-toolbar: the toolbar with the actions for the current translation
• strings-menu: the menu of the currently selected string or strings

A button can perform one of the following actions:

• Open a specified app module in the Editor’s right panel (see Editor Right Panel module)
• Open a specified app module in a modal dialog (see Modal module)
• Send an editor.button.click event to a specified app module

The panel and modal types are available at every location. The event type is available at the translation-toolbar and strings-menu locations.

The header locations and the translation toolbar show up to four buttons each, and the rest are available in the More app actions dropdown. In the assets mode, buttons are available at the header-right, header-left, and menu locations.

Editor buttons are also listed in the Editor’s Command Palette, and each of them can be assigned a keyboard shortcut in Help > Keyboard Shortcuts.

Access

You can grant access to this module to one of the following user categories:

For Crowdin:

• Only me (i.e., project owner)
• Me, project managers and developers
• All project members
• Selected users

For Crowdin Enterprise:

• Only organization admins
• Organization admins, project managers and developers
• All users in the organization projects
• Selected users

Structure

Panel

The button opens the specified module in the Editor’s right panel.

manifest.json

{
  "modules": {
    "editor-button": [
      {
        "key": "editor-button-key",
        "name": "Name of Editor Button",
        "logo": "/editor-button-logo.png",
        "modes": [
          "translate"
        ],
        "options": {
          "location": "header-right",
          "type": "panel",
          "module": "editor-panel-module-key",
          "weight": 10
        }
      }
    ],
    "editor-right-panel": [
      {
        "key": "editor-panel-module-key",
        "name": "New Panel",
        "modes": [
          "translate"
        ],
        "url": "/editor-page"
      }
    ]
  }
}

Modal

The button opens the specified module in a modal dialog.

manifest.json

{
  "modules": {
    "editor-button": [
      {
        "key": "editor-button-key",
        "name": "Name of Editor Button",
        "modes": [
          "translate"
        ],
        "options": {
          "location": "menu",
          "type": "modal",
          "module": "modal-module-key"
        }
      }
    ],
    "modal": [
      {
        "key": "modal-module-key",
        "name": "New Modal",
        "url": "/path/to/modal/module"
      }
    ]
  }
}

Event

The button sends an editor.button.click event to the specified module without opening it.

manifest.json

{
  "modules": {
    "editor-button": [
      {
        "key": "editor-button-key",
        "name": "Name of Editor Button",
        "modes": [
          "translate"
        ],
        "options": {
          "location": "translation-toolbar",
          "type": "event",
          "module": "editor-panel-module-key"
        }
      }
    ],
    "editor-right-panel": [
      {
        "key": "editor-panel-module-key",
        "name": "New Panel",
        "modes": [
          "translate"
        ],
        "url": "/editor-page"
      }
    ]
  }
}

The event payload depends on the button’s location. See Supported Events for the object structure.

Properties

key	Type: string Required: yes Description: Module identifier within the Crowdin app.
name	Type: string Required: yes Description: The human-readable name displayed in the button’s tooltip, and as the item label in the menus.
logo	Type: string Description: The relative URL to the button’s icon. The icon is displayed at 16x16 pixels. If omitted, the button uses the app’s logo.
modes	Type: array Required: yes Allowed values: translate, comfortable, side-by-side, multilingual, review, assets Description: The Editor’s mode list where the module will be available. Use translate to make the module available in the following views: comfortable, side-by-side, and multilingual. For more granular control, specify one or more of these values directly. The review mode is available only in Crowdin Enterprise and only on the Source Text Review workflow step. The assets mode is used for managing assets in the Editor.
options.location	Type: string Required: yes Allowed values: header-right, header-left, menu, translation-toolbar, strings-menu Description: The location in the Editor where the button is added.
options.type	Type: string Required: yes Allowed values: panel, modal, event Description: The type of action this button will perform. The event type is supported at the translation-toolbar and strings-menu locations.
options.module	Type: string Required: yes Description: The key of the module the button acts on. The module must be declared in the same app. Use an editor-right-panel module with the panel type, a modal module with the modal type, and an editor-right-panel or editor-background-worker module with the event type.
options.weight	Type: integer Description: The order of the button among the other buttons at the same location. Buttons with lower values are placed first: to the left in the header and the translation toolbar, and higher in the menus. The default value is 100.
environments	Type: string Allowed values: crowdin, crowdin-enterprise Description: Set of environments where a module could be installed. This parameter is needed for cross-product applications.

Runtime State

An app can update its own buttons while the Editor is open: set the icon, add a badge, override the tooltip, or make a button inactive. Use the AP.editor.updateButton method to apply the changes and AP.editor.resetButton to return the button to the state declared in the manifest.