Embedded Plugins

Insert object#

Reach plugins can hook into the Insert object button to provide extra functionality embedded in the rich text editor / viewer. This is currently available for Pages, News and Events. See the screenshot below for the location of the Insert object:

Configuration#

Embedded plugins are configured in an extension with an area of type ItemEditor. This can be configured in the definition.json file. The objectButton property defines the icon and the label for the button.

{
  "pluginId": "inline-action-button-sample",
  "extensions": [
    {
      "area": "ItemEditor",
      "componentName": "EmbeddedPluginSample",
      "objectButton": {
        "buttonLabel": {
          "defaultLabel": "Insert My Plugin",
          "translations": {
            "en": ""
          }
        },
        "iconName": "News"
      }
    }
  ]
}

The objectButton property is used to describe the action button inside the Insert object callout:

Property	Type	Description
`defaultLabel`	string	Defines the label displayed next to the icon in the callout node.
`translations` (optional)	object	This key value pair is used to provide translations. Each key represent a language country code (like "en") while the value represents that language's translation of the navigation node (like "Tasks"). If a language cannot be found it will automatically fallback to the value of the `defaultLabel`.
`iconName`	string	Defines the friendly name of a Fluent UI icon (formerly office ui fabric). Browse Icons

Example#

You can start creating an embedded plugin by using the create-reach-plugin CLI:

npx @livetiles/create-reach-plugin <plugin-directory-name>

Please note that the target directory must be empty if it already exists. This will generate all files necessary to start developing your plugin.

Make sure to select the option Embedded Plugin:

This will scaffold a simple react functional component with props defined by the type EmbeddedPluginProps. The following extra properties are available to consume inside plugins:

Property	Type	Description
`componentInstanceId`	string	A unique id generated when the component is added into the rich text. This allows for uniquely identifying the component when there are multiple instances of the same component added to the page
`isEditMode`	boolean	Whether the user is in view or edit mode

In order to persist plugin data the componentInstanceId can help to uniquely identify a certain plugin instance.

See a full sample here.