(feat) O3-3946: Enable Markdown Formatting for question labels

[Twiineenock]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

When typing in a question label in the interactive builder, the user should be able to format the question label in markdown format.
To support this, we have added formatting options to the question label input using the Tiptap editor framework.

Enabled Editor Options

The following formatting and functionality options are enabled for enhanced user interaction and content customization:

• Heading Formats (H1–H6): Supports six levels of headings for structured text hierarchy.
• Bold: Emphasizes text with bold styling.
• Italics: Provides italic styling for emphasis or contrast.
• Subscript and Superscript: Allows text placement below or above the baseline for mathematical and scientific notation.
• Underline: Highlights text with an underline for added emphasis.
• Strikethrough: Strikes out text to indicate removal or correction.
• Clear Formatting: Resets selected text to default styling.
• Color Picker: Enables text color customization via a color selection tool.
• Code: Formats text as code, preserving monospaced font and syntax styling.
• Link: Inserts hyperlinks for navigation to external resources.
• Redo and Undo: Provides functionality to revert or reapply recent changes.

Screenshots

Creating a question

Editing a question

Screancasts

7.webm

Related Issue

https://openmrs.atlassian.net/browse/O3-3946

Other

The question label is returned as an HTML string. Hence there is a change done in the openmrs-esm-form-engine-lib with this openmrs/openmrs-esm-form-engine-lib#408 to parse the string.

[NethmiRodrigo]

Hi @Twiineenock, sorry I had not written this ticket properly, that was entirely my fault. We should support markdown type questions in the interactive builder, and not add support for markdown formatting for the question label. Basically we should be able to create that would be rendered like this:

And its json would look like:

{
              "value": [
                "**This form is used to**:showcase feature of the react form engine",
                "### This is just an **explainer text** example  in *markdown*"
              ],
              "questionOptions": {
                "rendering": "markdown"
              },
              "id": "heading2"
}

Since the form engine already supports this, we shouldn't need to make any changes on to the form engine to do this.
Very sorry about this again 🙏. Updated the ticket as well

[NethmiRodrigo]

@Twiineenock @Kinotijoan looks like you've both worked on the markdown formatting, could you please connect and combine your work? Thanks!

[Twiineenock]

Hi @Twiineenock, sorry I had not written this ticket properly, that was entirely my fault. We should support markdown type questions in the interactive builder, and not add support for markdown formatting for the question label. Basically we should be able to create that would be rendered like this: And its json would look like:

{
              "value": [
                "**This form is used to**:showcase feature of the react form engine",
                "### This is just an **explainer text** example  in *markdown*"
              ],
              "questionOptions": {
                "rendering": "markdown"
              },
              "id": "heading2"
}

Since the form engine already supports this, we shouldn't need to make any changes on to the form engine to do this. Very sorry about this again 🙏. Updated the ticket as well

Thanks @NethmiRodrigo. Let me look at it that way.