O3-1990: Allow string as value for markdown

[reagan-meant]

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

Here is the sample json markdown being used. The first part part shows the current implementation using array while the subsequent ones show changes in this PR with string as value and render to handle unsupported type

{
  "questions": [
    {
      "type": "markdown",
      "questionOptions": {
        "rendering": "markdown"
      },
      "id": "fooMarkdown",
      "value": [
        "**This form is used to:** Document differentiated service deliver enrolment/ disenrolment.",
        "\n\ntest 1",
        "_test 3_"
      ]
    },
    {
      "type": "markdown",
      "questionOptions": {
        "rendering": "markdown"
      },
      "id": "fooMarkdown2",
      "value": "**This form is used to:** \n\n Document _differentiated_ service deliver enrolment/ disenrolment."
    },
    {
      "type": "markdown",
      "questionOptions": {
        "rendering": "markdown"
      },
      "id": "fooMarkdown3",
      "value": {
        "wrongvalue": "wrong value type"
      }
    },
    {
      "label": "Admission Date",
      "type": "encounterDatetime",
      "questionOptions": {
        "rendering": "ui-select-extended"
      },
      "id": "encDate"
    }
  ]
}

Screenshots

Related Issue

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

Other

[reagan-meant]

{
              "type": "markdown",
              "questionOptions": {
                "rendering": "markdown"
              },
              "id": "fooMarkdown2",
              "value": "**This form is used to:** \n\n Document _differentiated_ service deliver enrolment/ disenrolment."
            },
            {
              "type": "markdown",
              "questionOptions": {
                "rendering": "markdown"
              },
              "id": "fooMarkdown3",
              "value": [
                "**This form is used to:** ",
                " \n\n Document _differentiated_ service deliver enrolment/ disenrolment."
              ]
}
          

[reagan-meant]

[samuelmale]

This is close to the finish line; I think we also need to update this @reagan-meant

[samuelmale]

@reagan-meant this is basically good to go but I'm worried about the code duplication. What do you think of us introducing wrapper component?

markdown-wrapper.component.tsx:

const MarkdownWrapper: React.FC<{ markdown: string | string[] }> = ({ markdown }) => {
  return (
    <ReactMarkdown
      children={Array.isArray(markdown) ? markdown.join('\n') : markdown}
      unwrapDisallowed={true}
      allowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'strong', 'em']}
    />
  );
};

src/components/inputs/markdown/ohri-markdown.component.tsx:

const OHRIMarkdown: React.FC<OHRIFormFieldProps> = ({ question }) =>
  !question.isHidden && <MarkdownWrapper markdown={question.value} />;