--- title: "translate" description: "Translate your draft into a different language using the Yandex API." assumed_experience: "No experience with React, Flux, Electron, or N1." github: "https://github.com/nylas/N1/tree/master/examples/N1-Composer-Translate" --- Translation Plugin

Translation Plugin

Last Revised: April 23, 2015 by Ben Gotow

TranslateButton is a simple React component that allows you to select a language from a popup menu and translates draft text into that language.

request = require 'request'

{Utils,
 React,
 ComponentRegistry,
 DraftStore} = require 'nylas-exports'
{Menu,
 RetinaImg,
 Popover} = require 'nylas-component-kit'

YandexTranslationURL = 'https://translate.yandex.net/api/v1.5/tr.json/translate'
YandexTranslationKey = 'trnsl.1.1.20150415T044616Z.24814c314120d022.0a339e2bc2d2337461a98d5ec9863fc46e42735e'
YandexLanguages =
  'English': 'en'
  'Spanish': 'es'
  'Russian': 'ru'
  'Chinese': 'zh'
  'French': 'fr'
  'German': 'de'
  'Italian': 'it'
  'Japanese': 'ja'
  'Portuguese': 'pt'
  'Korean': 'ko'

class TranslateButton extends React.Component

¶

Adding a displayName makes debugging React easier
```
  @displayName: 'TranslateButton'
```
¶

Since our button is being injected into the Composer Footer, we receive the local id of the current draft as a prop (a read-only property). Since our code depends on this prop, we mark it as a requirement.
```
  @propTypes:
    draftLocalId: React.PropTypes.string.isRequired
```
¶

The render method returns a React Virtual DOM element. This code looks like HTML, but don’t be fooled. The CJSX preprocessor converts

<a href="http://facebook.github.io/react/">Hello!</a>

into Javascript objects which describe the HTML you want:

React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')

We’re rendering a Popover with a Menu inside. These components are part of N1’s standard nylas-component-kit library, and make it easy to build interfaces that match the rest of N1’s UI.
```
  render: =>
    React.createElement(Popover, {"ref": "popover",  \
             "className": "translate-language-picker pull-right",  \
             "buttonComponent": (@_renderButton())},
      React.createElement(Menu, {"items": ( Object.keys(YandexLanguages) ),  \
            "itemKey": ( (item) -> item ),  \
            "itemContent": ( (item) -> item ),  \
            "onSelect": (@_onTranslate)
            })
    )
```

Helper method to render the button that will activate the popover. Using the RetinaImg component makes it easy to display an image from our package. RetinaImg will automatically chose the best image format for our display.

  _renderButton: =>
    React.createElement("button", {"className": "btn btn-toolbar"}, """
      Translate
""", React.createElement(RetinaImg, {"name": "toolbar-chevron.png"})
    )

  _onTranslate: (lang) =>
    @refs.popover.close()

¶

Obtain the session for the current draft. The draft session provides us the draft object and also manages saving changes to the local cache and Nilas API as multiple parts of the application touch the draft.
```
    session = DraftStore.sessionForLocalId(@props.draftLocalId)
    session.prepare().then =>
      body = session.draft().body
      bodyQuoteStart = Utils.quotedTextIndex(body)
```

Identify the text we want to translate. We need to make sure we don’t translate quoted text.

      if bodyQuoteStart > 0
        text = body.substr(0, bodyQuoteStart)
      else
        text = body

      query =
        key: YandexTranslationKey
        lang: YandexLanguages[lang]
        text: text
        format: 'html'

Use Node’s request library to perform the translation using the Yandex API.

      request {url: YandexTranslationURL, qs: query}, (error, resp, data) =>
        return @_onError(error) unless resp.statusCode is 200
        json = JSON.parse(data)

The new text of the draft is our translated response, plus any quoted text that we didn’t process.

        translated = json.text.join('')
        translated += body.substr(bodyQuoteStart) if bodyQuoteStart > 0

To update the draft, we add the new body to it’s session. The session object automatically marshalls changes to the database and ensures that others accessing the same draft are notified of changes.

        session.changes.add(body: translated)
        session.changes.commit()

  _onError: (error) =>
    @refs.popover.close()
    dialog = require('remote').require('dialog')
    dialog.showErrorBox('Geolocation Failed', error.toString())


module.exports =

Activate is called when the package is loaded. If your package previously saved state using serialize it is provided.

  activate: (@state) ->
    ComponentRegistry.register TranslateButton,
      role: 'Composer:ActionButton'

¶

Serialize is called when your package is about to be unmounted. You can return a state object that will be passed back to your package when it is re-activated.
```
  serialize: ->
```
¶

This optional method is called when the window is shutting down, or when your package is being updated or disabled. If your package is watching any files, holding external resources, providing commands or subscribing to events, release them here.
```
  deactivate: ->
    ComponentRegistry.unregister(TranslateButton)
```