Content SaaS | Integrations Library - Markdown Editor as a UI Extension
Tags: bloomreach, saas, integrations, markdown
Published: 2022-10-17 09:23:05

Develop a Markdown editor UI extension and add it as a custom integration to your Bloomreach Content environment.

Recently Bloomreach Content (SaaS) released a feature, [Integrations Library - UI Extensions](https://documentation.bloomreach.com/content/docs/integrations-library?_ga=2.2576438.729086942.1664529358-129010115.1663337065). By using this feature, you can add your document field extensions as a custom integration. This opens up new possibilities to create content-type fields of your own. 

Here is how it works: 

- **A UI Extension (Custom Integration) application is loaded as an iframe inside of a field of a content type in the Experience manager.**
- **The UI Extension application uses the [UI Extension Client Library](https://documentation.bloomreach.com/content/docs/ui-extension-client-library?_ga=2.183588000.729086942.1664529358-129010115.1663337065) to communicate between the application and the Experience manager - primarily to save and read field values in the CMS.**
- **The UI Extension application can be built in any well-known frontend framework e.g., React, Angular, Vue, or Plain JS, as long as it includes the Client Library.**
- **Additional configuration and context (such as CMS user or locale) can be passed along the UI Extension application.**

For this blog, I’m going to create a new UI extension that will allow editors to edit in Markdown for markup. Markdown markup is nowadays used frequently with mobile native applications. I recently created an integration with Bloomreach Content and Flutter with the [Flutter SDK](link flutter blogpost once up).

This markdown editor is complementary to the Flutter SDK. The markdown editor itself is an integration with https://stackedit.io/, which is, in my opinion, a very well-constructed and easy-to-use markdown editor.

## Frontend Project
Firstly, create the UI Extension Application as a new frontend project. I’m very familiar with React, so I’ll create a simple React project:

```
yarn create react-app markdown-ui-extension
```
Install the UI Extension Client Library:

```
yarn add @bloomreach/ui-extension
```

## Code the Plugin
Register the UI extension:

```
const ui = await UiExtension.register();
```
Get the current field value:

```
const brDocument = await ui.document.get();
const value = await ui.document.field.getValue();
```
Set a field value:

```
ui.document.field.setValue(‘new value’);
```

The source code of the markdown editor can be found at:

https://github.com/ksalic/markdown-field/

## Deploy the Plugin
The Markdown editor plugin is deployed on:

https://markdown-field.bloomreach.works/

## Use the Integrations UI to Register the Extension
As a developer, log in to Bloomreach Content and navigate to _Setup > Integrations_:


![Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otywfjm4dh9f03tbkmvz.png)

Add a new “Custom Integration”:


![Integrations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwceh2fyb0h3bbdqpbk8.png)

Make sure all of the fields are marked as the following:

![Markdown integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsxymyd7851psugxdk5h.png)

Once you save, the custom integration is now listed and available for use on content types.


![Added Integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0jwpbh1bn595vlr8bmr.png)

## Add the UI Extension to a Content Type
As a developer make sure you create a new [developer project](https://documentation.bloomreach.com/content/docs/development-environment?_ga=2.188316590.729086942.1664529358-129010115.1663337065) and make sure [content type changes](https://documentation.bloomreach.com/content/docs/content-modeling?_ga=2.188316590.729086942.1664529358-129010115.1663337065) are checked!

Create or edit a new [content type](https://documentation.bloomreach.com/content/docs/document-type-editor?_ga=2.188316590.729086942.1664529358-129010115.1663337065).

Add a new Open UI String field to the content type:​​​​​

![Open UI String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzb3a1cd211k6k49ndu6.png)

Select the UI Extension from the dropdown:


![Select UI Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je6auphw3z7rf5ia3hyw.png)

Congratulations. You have now successfully added a markdown field to a content type!


![Markdown Field](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otjrxasq01m5v66r7ed.png)

The source code of the markdown editor can be found at:

https://github.com/ksalic/markdown-field/