Kuika's MD Editor element allows users to edit rich text content in Markdown format. You can easily create formatting such as headings, lists, links, quotes, images, or code blocks. The entered Markdown content can be viewed in formatted form via the MD Viewer element.

The MD Editor element can only be used in web applications.

Areas of Use

• User comments and description fields
• Blog posts or content management panels
• Wiki, knowledge base, or documentation screens
• Creating technical documents and training content
• Forum or community posts

Use Case – Comment Editing (Comment Detail)

In a project management application, users can leave comments for each task or edit their existing comments. The MD Editor element is used in this comment field, allowing users to format text.

In the scenario:

• The user enters the “Comment Detail” page.
• The MD Editor appears in the comment field.
• The user adds a title, bold text, or a bulleted list to their text.
• When the “Save” button is clicked, the edited content is saved to the data source.
• The saved Markdown content is displayed in formatted form using the MD Viewer.

Connecting the Data Source

1. Go to the Datasources module.
2. Click on the Tables tab.
3. Create a new table and name it Comments.
4. Add the following fields:

5. Then go to the SQL Actions tab.
6. Create a new action: SaveComment
7. Enter the following SQL query:

‍INSERT INTO Comments (CommentText, CreatedBy, CreatedAt)VALUES (@CommentText, @CreatedBy, SYSDATETIMEOFFSET());

This query saves the Markdown-formatted content entered in the MD Editor to the database.

UI Design Module Operations

1. Go to the UI Design module.
2. Select the MD Editor element from the Elements → Text Input → MD Editor category on the left side.
3. Drag and drop it onto the screen.
4. Configure the following settings via the Properties Panel on the right side:

• Value: Comments.CommentText
• Hide Tool Bar: False
• Theme: Light (or Dark can be selected)
• Simplified: False

5. Add a Button (Save) element below the editor.
6. Define the following action for the button:

• onClick → Managed DB → Custom SQL Action (SaveComment)

7. Parameter: CommentText → MDEditor1.value
8. The saved content can be viewed on a different page using the MD Viewer element.

Using Properties in the Scenario Context

• Value: Represents the Markdown content edited and saved in the MD Editor.
• Hide Tool Bar: Provides a simple writing experience by hiding the toolbar.
• Theme: Determines the editor's color theme (Light or Dark).
• Simplified: Simplifies the interface, displaying only basic editing tools.

When the Scenario Step is Complete

• The user edits their comment in Markdown format.
• When they click the “Save” button, the text is saved to the database.
• The same content is displayed in formatted form via the MD Viewer.
• If desired, the user can reopen and edit their comment later.

Limitations

• MD Editor is only supported in web projects.
• Very large texts may affect performance.
• Non-Markdown formatting codes may not be processed correctly.

Tips and Best Practices

• Make it easier for users to learn formatting by providing them with a sample Markdown template.
• For use in dark mode, choose the “Theme: Dark” option.
• Set Hide Tool Bar = True to provide a minimal interface for advanced users only.
• Always use the MD Viewer element with MD Editor to display saved content in formatted form.
• Check whether the MDEditor.value field is empty before saving content.