feat (O3-3946): Add support for markdown questions #355

Twiineenock · 2024-10-14T03:53:39Z

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

Description

This pull request introduces support for creating markdown-based questions within the interactive form builder. Markdown questions are designed for scenarios where additional explanatory content is needed within the form, apart from standard question labels. This content can help users understand how to fill out fields, explain the meaning of specific fields, or add other context. Since these questions are meant for accessibility and enhanced guidance, they do not contain fields to fill out.

Note: This PR complements the work in the form-engine repository. See feat: Tweak the markdown support #411 for additional details on markdown support improvements related to this update.

Implementation Details

Currently, there is markdown rendering support in the openmrs-esm-form-engine-lib using react-markdown, which renders markdown strings as HTML elements within the UI.

To provide full markdown support with editing capabilities, this PR includes the following key components:

Markdown Editor UI: Integrated using react-mde, allowing users to easily create and edit markdown content.
Markdown Renderer: Uses react-markdown to safely render markdown content to React elements, supporting common markdown features such as:
- Headings
- Bold and Italics
- Lists (ordered, unordered, and task lists)
- Strikethrough
- Superscript and Subscript

Key Changes

UI Enhancements:
- Added a markdown editor UI in the form builder, allowing users to create and edit markdown-based questions directly.
- Ensured a rich text editing experience with full markdown support for common styling and structuring elements.
Integration with form-engine:
- Minor adjustments within the openmrs-esm-form-engine-lib to seamlessly integrate the markdown editor with existing question types.
- Leveraged react-markdown within the form engine to convert markdown text into React-rendered HTML elements.

Features Added in this PR

Creation of New Markdown Questions: Users can now create new markdown-based questions, formatted using markdown syntax.
Editing Existing Markdown Questions: Markdown questions can be easily edited, providing flexibility in adding or updating content.

By implementing this feature, the form builder now offers greater flexibility and accessibility, allowing clients to incorporate rich text explanations and formatting within their forms.

Technical Note: The core of this markdown support relies on react-markdown for rendering and react-mde for user editing. These libraries handle markdown safely and ensure React compatibility.

Links

Screenshots

Screancasts

Creating a new question:

creat.webm

Edit an existing Question

edit-qn.webm

Related Issue

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

Other

NethmiRodrigo · 2024-10-14T09:24:20Z

@Twiineenock could you please update your branch?

NethmiRodrigo · 2024-10-14T09:32:57Z

src/components/interactive-builder/draggable-question.component.tsx

+        <p className={styles.questionLabel}>
+          <MarkdownWrapper markdown={question.label || question.value} />
+        </p>


Since the text shown in markdown can be quite long, unlike a question label, I don't think we should show the entirety of it here. Maybe we could just say Markdown content, or something along those lines?
@denniskigen thoughts?

@NethmiRodrigo , we have come up with this:

If the markdown is very long, we show a small part of the markdown plus ellipsis to show that there is more content.

Lovely! Thanks @Twiineenock!

NethmiRodrigo · 2024-10-14T09:33:37Z

src/components/interactive-builder/markdown-question.component.tsx

@@ -0,0 +1,54 @@
+import React from 'react';


Love that you made this into a component of its own! Thank you!

NethmiRodrigo · 2024-10-14T09:34:56Z

src/components/interactive-builder/edit-question.modal.tsx

+            <Select
+                defaultValue={questionToEdit.questionOptions.rendering}
+                onChange={(event: React.ChangeEvent<HTMLSelectElement>) => setFieldType(event.target.value as RenderType)}
+                id="renderingType"
+                invalidText={t('validFieldTypeRequired', 'A valid field type value is required')}
+                labelText={t('renderingType', 'Rendering type')}
+                required
+              >


I'd prefer to have the question label be the first input in the modal, it feels more intuitive.

NethmiRodrigo · 2024-10-14T09:35:25Z

src/components/interactive-builder/markdown-question.component.tsx

+import styles from './markdown-question.scss';
+
+interface MarkdownQuestionProps {
+  palceHolder?: string;


Suggested change

palceHolder?: string;

placeholder?: string;

NethmiRodrigo · 2024-10-14T09:39:18Z

package.json

+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",


Are these libraries to support for html tags? If so, I'd rather we leave them out and not have support for HTML tags

Because I'm concerned about XSS - https://www.npmjs.com/package/react-mde#xss-concerns
CCing @denniskigen

My bad, I see we already support some tags in the form engine - https://github.com/openmrs/openmrs-esm-form-engine-lib/blob/810fd93961be3a38c3e3afe351996d676de65eec/src/components/inputs/markdown/markdown-wrapper.component.tsx#L9

Are these libraries to support for html tags? If so, I'd rather we leave them out and not have support for HTML tags

Thanks @NethmiRodrigo for the Review,

We do need remark-gfm if we are to have GitHub Flavored Markdown (GFM) e.g tables, task lists, strikethroughs, Autolinks e.t.c

And we need The rehypeRaw plugin processes raw HTML embedded within Markdown content, allowing it to render as HTML elements in the final output.

Are there some of these formatting options we don't need so we can keep it as simple as possible?

Lets limit the formatting options to only the ones that are currently supported by the react form engine. We don't need these libraries then right?

Lets limit the formatting options to only the ones that are currently supported by the react form engine. We don't need these libraries then right?

We now have this implemented

…k/openmrs-esm-form-builder into feat/support-for-markdown-qns

Twiineenock · 2024-10-21T06:11:07Z

Hi @NethmiRodrigo, @denniskigen,

I'm currently trying to import the react-mde styles directly from the library instead of rewriting them. However, I noticed that our Webpack configuration is enabling CSS Modules globally, which is likely scoping the CSS classes to components, making them unavailable for global styles like those from react-mde.

Here’s the relevant part of the Webpack configuration:

const cssLoader = {
    loader: require.resolve('css-loader'),
    options: {
      modules: {
        localIdentName: `${ident}__[name]__[local]___[hash:base64:5]`,
      },
    },
  };

I suspect that this configuration is preventing the react-mde styles from being applied globally. Could this be the reason why the styles from react-mde aren't working as expected?

How can we tweak the Webpack config to ensure that CSS Modules are applied to our local styles, but exclude the styles from react-mde (or any other library in node_modules) so that they are applied globally without scoping?

Thanks!

NethmiRodrigo · 2024-10-21T06:12:46Z

I can't seem to figure out why the e2e tests are failing, they pass perfectly fine locally. When creating a question, the save button in the modal stays disabled for some reason. Pinging @denniskigen for help

NethmiRodrigo · 2024-10-22T14:27:46Z

Hi @NethmiRodrigo, @denniskigen,

I'm currently trying to import the react-mde styles directly from the library instead of rewriting them. However, I noticed that our Webpack configuration is enabling CSS Modules globally, which is likely scoping the CSS classes to components, making them unavailable for global styles like those from react-mde.

Here’s the relevant part of the Webpack configuration:
const cssLoader = {
    loader: require.resolve('css-loader'),
    options: {
      modules: {
        localIdentName: `${ident}__[name]__[local]___[hash:base64:5]`,
      },
    },
  };
I suspect that this configuration is preventing the react-mde styles from being applied globally. Could this be the reason why the styles from react-mde aren't working as expected?

How can we tweak the Webpack config to ensure that CSS Modules are applied to our local styles, but exclude the styles from react-mde (or any other library in node_modules) so that they are applied globally without scoping?

Thanks!

@Twiineenock about this, with help from @ibacher, I changed the webpack config to overwrite the css rule, which is basically
config.cssRuleConfig.rules = [ { test: /\.css$/, use: [require.resolve('style-loader'), require.resolve('css-loader')], }, ];
And then in the markdown-question.component.tsx I imported the css file like so
import 'react-mde/lib/styles/css/react-mde-all.css';
The issue now is that we get an error saying Unknown word... which I saw on a stack overflow could be because the css loader and style loader libraries gets imported more than once

NethmiRodrigo · 2024-10-23T18:02:39Z

@Twiineenock lets opt to leave the styling as you've done. Although for future work, we should make the markdown editor match the carbon design system - https://carbondesignsystem.com/patterns/text-toolbar-pattern/. All that's left is figuring out why the e2e test isn't working. I doubt it has anything to do with your changes because they pass locally

Twiineenock · 2024-10-24T04:03:06Z

@Twiineenock lets opt to leave the styling as you've done. Although for future work, we should make the markdown editor match the carbon design system - https://carbondesignsystem.com/patterns/text-toolbar-pattern/. All that's left is figuring out why the e2e test isn't working. I doubt it has anything to do with your changes because they pass locally

Woow, great Idea @NethmiRodrigo ,
Could I apply carbon design system to the markdown editor before we could let this in?

Is it better when its a separate work?

NethmiRodrigo · 2024-10-25T06:15:46Z

@Twiineenock if you would like to do it in this PR, we can go with that approach. I would prefer we get this in and do that work incrementally, since this feature works perfectly fine as is. About the e2e test, could you please update the save button in the add question and edit question modal to remove the check for the label to be not null for the button to be enabled, since we made it optional? I believe that is what could be why the e2e test fails

Twiineenock · 2024-10-25T07:21:17Z

@Twiineenock if you would like to do it in this PR, we can go with that approach. I would prefer we get this in and do that work incrementally, since this feature works perfectly fine as is. About the e2e test, could you please update the save button in the add question and edit question modal to remove the check for the label to be not null for the button to be enabled, since we made it optional? I believe that is what could be why the e2e test fails

Alright we shall do that incrementally

NethmiRodrigo · 2024-10-25T09:15:04Z

src/components/interactive-builder/add-question.modal.tsx

@@ -322,14 +325,16 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
        <ModalBody hasScrollingContent>
          <FormGroup legendText={''}>
            <Stack gap={5}>
-              <TextInput
+              {renderingType === 'markdown' ? <MarkdownQuestion onValueChange={setQuestionValue}/> : (
+                <TextInput
                id="questionLabel"
                labelText={<RequiredLabel isRequired={isQuestionRequired} text={t('questionLabel', 'Label')} t={t} />}
                placeholder={t('labelPlaceholder', 'e.g. Type of Anaesthesia')}
                value={questionLabel}
                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuestionLabel(event.target.value)}
                required


Shall we remove the required attributes and change the label to not be required as well, since it is no longer so

NethmiRodrigo · 2024-10-25T09:16:04Z

src/components/interactive-builder/edit-question.modal.tsx

+                id={questionToEdit.id}
+                labelText={t('questionLabel', 'Label')}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuestionLabel(event.target.value)}
+                required


NethmiRodrigo · 2024-10-25T09:16:57Z

Just a few final changes and we can merge this in @Twiineenock, could you also please update your branch?

NethmiRodrigo · 2024-10-25T12:30:16Z

src/types.ts

@@ -117,7 +117,7 @@ export interface Section {
 export interface Question {
  id: string;
  label?: string;
-  value?:string;
+  value?: string;
  type: string;


We should make this optional since markdown content doesn't have a type

And we should update this in form engine too

@NethmiRodrigo , we have a PR here feat: FormField Type should be Optioanl #419 for this.

NethmiRodrigo · 2024-10-25T14:32:33Z

src/types.ts

@@ -117,8 +117,8 @@ export interface Section {
 export interface Question {
  id: string;
  label?: string;
-  value?:string;
-  type: string;
+  value?: string;


@Twiineenock I see value is of type any in form-engine and not string

@NethmiRodrigo I had set the type to string because of this eslint error Unexpected any. Specify a different type.eslint[@typescript-eslint/no-explicit-any](https://typescript-eslint.io/rules/no-explicit-any)

Should we go for any or string?

No worries! Added this // eslint-disable-next-line @typescript-eslint/no-explicit-any inline comment to escape eslint check for type any when validating question value attribute.

feat: Add support from markdown questions

5a50c2b

Twiineenock mentioned this pull request Oct 14, 2024

(feat) Make the label in FormField optional to support Markdown content openmrs/openmrs-esm-form-engine-lib#411

Merged

3 tasks

NethmiRodrigo self-requested a review October 14, 2024 09:22

NethmiRodrigo requested changes Oct 14, 2024

View reviewed changes

NethmiRodrigo requested a review from denniskigen October 14, 2024 09:35

NethmiRodrigo reviewed Oct 14, 2024

View reviewed changes

Twiineenock and others added 6 commits October 14, 2024 20:08

Merge branch 'main' into feat/support-for-markdown-qns

7185afd

minor fixes

a329aec

Merge branch 'feat/support-for-markdown-qns' of github.com:Twiineenoc…

9dc9747

…k/openmrs-esm-form-builder into feat/support-for-markdown-qns

remove rehype-raw and remark-gfm and minor tweaks

d555079

(test): Add mock for markdown component

8325371

(chore): Update form engine and framework

0928980

NethmiRodrigo mentioned this pull request Oct 21, 2024

(feat) O3-3947: Add support for different question types #354

Open

3 tasks

NethmiRodrigo mentioned this pull request Oct 25, 2024

(chore) Bump form engine lib #356

Merged

3 tasks

remove label check from questionMOdal save button

7e0923f

NethmiRodrigo reviewed Oct 25, 2024

View reviewed changes

Twiineenock and others added 4 commits October 25, 2024 13:21

remove required attributes from label

526cb1f

Merge yarn.lock from main into feat/support-for-markdown-qns

c932a2e

Merge branch 'main' into feat/support-for-markdown-qns

5953379

add yarn.lock

6a4552b

Twiineenock force-pushed the feat/support-for-markdown-qns branch from d79ef4e to 6a4552b Compare October 25, 2024 12:06

Update yarn.lock

4afe95e

NethmiRodrigo reviewed Oct 25, 2024

View reviewed changes

question type is optional

6e35125

Twiineenock mentioned this pull request Oct 25, 2024

(refactor) FormField attribute 'Type' should be Optional openmrs/openmrs-esm-form-engine-lib#419

Open

3 tasks

NethmiRodrigo reviewed Oct 25, 2024

View reviewed changes

Twiineenock added 2 commits October 25, 2024 18:05

question attribute value should have type any

01a5a9a

no-explicit-any for question attribute value

a34c7fb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat (O3-3946): Add support for markdown questions #355

feat (O3-3946): Add support for markdown questions #355

Twiineenock commented Oct 14, 2024 •

edited by NethmiRodrigo

Loading

NethmiRodrigo commented Oct 14, 2024

NethmiRodrigo Oct 14, 2024

Twiineenock Oct 15, 2024

NethmiRodrigo Oct 16, 2024

NethmiRodrigo Oct 14, 2024

NethmiRodrigo Oct 14, 2024

NethmiRodrigo Oct 14, 2024

NethmiRodrigo Oct 14, 2024 •

edited

Loading

NethmiRodrigo Oct 14, 2024 •

edited

Loading

NethmiRodrigo Oct 14, 2024

Twiineenock Oct 14, 2024 •

edited

Loading

NethmiRodrigo Oct 15, 2024

Twiineenock Oct 15, 2024

Twiineenock commented Oct 21, 2024

NethmiRodrigo commented Oct 21, 2024

NethmiRodrigo commented Oct 22, 2024 •

edited

Loading

NethmiRodrigo commented Oct 23, 2024

Twiineenock commented Oct 24, 2024 •

edited

Loading

NethmiRodrigo commented Oct 25, 2024 •

edited

Loading

Twiineenock commented Oct 25, 2024

NethmiRodrigo Oct 25, 2024

NethmiRodrigo Oct 25, 2024

NethmiRodrigo commented Oct 25, 2024

NethmiRodrigo Oct 25, 2024

NethmiRodrigo Oct 25, 2024

Twiineenock Oct 25, 2024

NethmiRodrigo Oct 25, 2024

Twiineenock Oct 25, 2024

Twiineenock Oct 25, 2024

Twiineenock Oct 25, 2024 •

edited

Loading

feat (O3-3946): Add support for markdown questions #355

Are you sure you want to change the base?

feat (O3-3946): Add support for markdown questions #355

Conversation

Twiineenock commented Oct 14, 2024 • edited by NethmiRodrigo Loading

Requirements

Summary

Description

Implementation Details

Key Changes

Features Added in this PR

Links

Screenshots

Screancasts

Related Issue

Other

NethmiRodrigo commented Oct 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NethmiRodrigo Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

NethmiRodrigo Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Twiineenock Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Twiineenock commented Oct 21, 2024

NethmiRodrigo commented Oct 21, 2024

NethmiRodrigo commented Oct 22, 2024 • edited Loading

NethmiRodrigo commented Oct 23, 2024

Twiineenock commented Oct 24, 2024 • edited Loading

NethmiRodrigo commented Oct 25, 2024 • edited Loading

Twiineenock commented Oct 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NethmiRodrigo commented Oct 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Twiineenock Oct 25, 2024 • edited Loading

Choose a reason for hiding this comment

Twiineenock commented Oct 14, 2024 •

edited by NethmiRodrigo

Loading

NethmiRodrigo Oct 14, 2024 •

edited

Loading

NethmiRodrigo Oct 14, 2024 •

edited

Loading

Twiineenock Oct 14, 2024 •

edited

Loading

NethmiRodrigo commented Oct 22, 2024 •

edited

Loading

Twiineenock commented Oct 24, 2024 •

edited

Loading

NethmiRodrigo commented Oct 25, 2024 •

edited

Loading

Twiineenock Oct 25, 2024 •

edited

Loading