Novulo Code Mirror Plugin
The Novulo Code Mirror Plugin is a plugin designed to provide a versatile text area element for handling structured text formats and provides syntax highlighting for the following types of text: Markdown, SQL, XML, and JSON.
Features
Configurable UI Element
The Novulo Code Mirror Plugin introduces a UI text area element that can be configured for different text types. Users can select the appropriate mode based on the expected content format:
- Markdown
- SQL
- XML
- JSON
Configuration Options
The UI element accepts two configuration settings:
- Mode: Determines the type of text to be entered and edited (Markdown, SQL, XML, JSON).
- Markdown to HTML Process: Available only when the mode is set to Markdown, this allows users to configure a Novulo process that takes Markdown text from the text area, converts it into HTML, and returns the processed output. This is particularly useful when integrating a Markdown editor with an HTML editor for preview and display purposes.
Plugin Actions
The plugin provides two key actions:
1. MarkdownToHtml
- Description: Converts Markdown text to HTML.
- Input Parameter:
string(Markdown text to be converted). - Return Value:
HTML(converted Markdown output).
This action enables seamless Markdown rendering, making it ideal for applications requiring both text-based editing and HTML previews.
2. FormatMarkupProcess
- Description: Formats or indents JSON and XML texts within the Code Mirror UI.
- Usage:
- When the ALT+E key combination is pressed while the editor is selected, the process is triggered to format the text within the field.
- SQL texts are formatted differently and handled separately.
- Markdown mode does not support formatting or indentation actions.
Usage Scenarios
- Developers working with structured text formats (SQL, JSON, XML) benefit from improved readability and formatting support.
- Markdown users can leverage the Markdown to HTML Process to preview content in rendered HTML format.
Example usage
On a page I have 2 dummy UI elements
- Code mirror element in markdown mode, with configured Markdown to HTML process
- Dummy non-editable HTML editor element
- The plugin configuration looks like this :
- The parameters for the Plugin process are the record itself and the current pagestate. I use the pagestate to obtain the markdown text (from the Dummy Code mirror element) and use it as parameter for the MarkdownToHtml process. The output of the Markdown to HtmlProcess is used in the Update record action to set the value of the dummy html editor.
In the application it looks like this:
Example Markdown mode
Example SQL mode
Example XML mode
Example JSON mode
