DEV Community

ksalic for Bloomreach

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Install the UI Extension Client Library:

yarn add @bloomreach/ui-extension
Enter fullscreen mode Exit fullscreen mode

Code the Plugin

Register the UI extension:

const ui = await UiExtension.register();
Enter fullscreen mode Exit fullscreen mode

Get the current field value:

const brDocument = await ui.document.get();
const value = await ui.document.field.getValue();
Enter fullscreen mode Exit fullscreen mode

Set a field value:

ui.document.field.setValue(‘new value’);
Enter fullscreen mode Exit fullscreen mode

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

Add a new “Custom Integration”:

Integrations

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

Markdown integration

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

Added Integration

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:​​​​​

Open UI String

Select the UI Extension from the dropdown:

Select UI Extension

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

Markdown Field

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

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

Top comments (0)