Editor Asset Panel Module

The Editor Asset Panel module allows your app to replace the default asset preview panel in the Editor. When a user opens an asset, your app can take over the entire preview area if the asset’s file name matches a pattern you define.

This functionality is particularly useful for handling file types that are not natively previewable in the Editor, such as video, audio, or other proprietary formats. If an asset’s file name matches the fileNamePattern specified in your app’s manifest, your app will be loaded in place of the default preview. If there is no match, the standard Crowdin preview panel will be displayed.

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

{
  "modules": {
    "editor-asset-panel": [
      {
        "key": "your-module-key",
        "name": "Module name",
        "url": "/editor-page",
        "fileNamePattern": "^.+\\.xyz$",
        "environments": [
          "crowdin", "crowdin-enterprise"
        ]
      }
    ]
  }
}

Properties

`key`	Type: `string` Required: yes Description: Module identifier within the Crowdin app.
`name`	Type: `string` Required: yes Description: The human-readable name of the module.
`url`	Type: `string` Required: yes Description: The relative URL to the module content page that will be embedded in the Editor’s asset panel.
`fileNamePattern`	Type: `string` Required: yes Description: A regular expression that Crowdin uses to match the file names of assets your app can handle. If the asset’s name matches this pattern, your app will be loaded in the preview panel. For example, to match all MOV files, use `”^.+\.mov$“`.
`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.

How It Works

The Editor Asset Panel module operates on an event-driven mechanism. When a user navigates to an asset within the Editor, the system checks for any installed apps that use this module.

Pattern Matching: Crowdin takes the fileNamePattern from your app’s manifest.json and tests it against the name of the currently opened asset (e.g., clip.mov).
App Initialization: If the asset’s file name matches the pattern, Crowdin replaces the default preview panel with an iframe pointing to your app’s url.
Event Handling: Once your app is loaded, Crowdin dispatches events to it, which your app must subscribe to and handle. These events contain the necessary data (payload) for your app to display the correct asset content.

The primary events are:

asset.source.preview: Dispatched when the user clicks on the source asset preview.
asset.suggestion.preview: Dispatched when the user clicks on a translated asset preview.

Your app should listen for these events to implement its custom preview logic, such as rendering a video player or an audio console. If an asset’s file name does not match the fileNamePattern, the default Crowdin asset previewer will be loaded as usual.

Was this page helpful?