Content SaaS | Integrations Library - Markdown Editor as a UI Extension

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. 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 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.

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:

Add a new “Custom Integration”:

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

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

Add the UI Extension to a Content Type

As a developer make sure you create a new developer project and make sure content type changes are checked!

Create or edit a new content type.

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

Select the UI Extension from the dropdown:

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

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

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