API Reference

---

Table of contents

• Element bells-config
• Element bells-editor

---

Element bells-config

The bells-config element activates the Bells Unity component. Only one bells-config element is needed for the entire application. Some configuration is required, and Bells Unity will not activate if the required configuration is missing. Bells Unity will deactivate any active instances of editors if the required configuration is removed.

Configuration Settings

• clientId (Required)

  Valid values:

  • development-bells-unity
  • qa-bells-unity
  • uat-bells-unity
  • prod-bells-unity

  This ID is used to connect to Bells services. It identifies which environment and application is running.

• accessToken

  Your user’s access token from your application. This will be used to authenticate the user with Bells services. The access token will be used to exchange for a Bells access token internally.

  If not provided, editors will activate in no-service mode.

• accessTokenIssuer

  The URL to the issuer of your access token. This value must be whitelisted by Bells OAuth services.

  If not provided, editors will activate in no-service mode.

---

Element bells-editor

The bells-editor element wraps any textarea you wish to have swapped out with a Bells Editor. You may have as many bells-editor elements as you wish. Bells Unity will activate an editor as new bells-editor elements are attached to the DOM. Bells Unity will automatically manage the editor instances and will clean up editors if the bells-editor element is detached from the DOM.

The textarea element can be deeply nested within the bells-editor, but size="mirror" (see below) may not work correctly if there are other elements with dimension present.

Attribute size

The bells-editor element supports a size attribute. Values are auto or mirror. The default is auto.

• auto - The editor will automatically grow in height as content is written.
• mirror - The editor will match the dimensions of the textarea element it wraps. The size of your textarea element can be styled by your application.

<bells-editor size="mirror">
  <textarea>...</textarea>
</bells-editor>

Styling with min-height

When using size="auto", the bells-editor element can be styled with minimum height styling. This is useful if you want to allow the editor to grow in height remain at least some minimum height.

<bells-editor style="min-height: 100px">
  <textarea>...</textarea>
</bells-editor>