(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;

package.json

…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

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

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

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?

src/types.ts

NethmiRodrigo · 2024-11-01T07:17:47Z

src/types.ts

-  type: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: any;
+  type?: string;


We should revert making type to optional. That's probably why the build fails

NethmiRodrigo · 2024-11-01T07:19:06Z

src/types.ts

@@ -63,8 +63,9 @@ export interface Schema {
      questions: Array<{
        id: string;
        label?: string;
-        value?:string;
-        type: string;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any


Rather than adding this as a comment, lets follow what has been done in the form engine and add this as a rule to the eslintrc file. See https://github.com/openmrs/openmrs-esm-form-engine-lib/blob/7f9a0813b1c69450e2cc0fcfa5222cd880b6033d/.eslintrc#L16

Thanks, @NethmiRodrigo! Adding it directly to the .eslintrc file, like in the form engine, was a great tip—appreciate the help!

Actually, we would prefer that the no-explicit-any rule is enabled and disclaimed like this where it's unavoidable (although, for preference, use unknown rather than any).

FWIW, the only reason its currently disabled in other repos is because historically we didn't enforce it.

NethmiRodrigo · 2024-11-01T11:59:26Z

Alrighty! Great work @Twiineenock! Could you update your branch and we'll merge this in!

ibacher · 2024-10-25T14:35:21Z

jest.config.js

@@ -14,6 +14,7 @@ module.exports = {
    'lodash-es': 'lodash',
    '^dexie$': '<rootDir>/node_modules/dexie',
    '^react-i18next$': '<rootDir>/__mocks__/react-i18next.js',
+    'react-markdown': '<rootDir>/__mocks__/react-markdown.tsx',


I don't love this type of mocking. It means that the tests cannot actually test this component. Is there a reason we need to stub it out like this?

This is a very bad response from me to say this as the reason, but I did this following what we had done in form-engine, because jest threw an error.

ibacher · 2024-10-25T14:39:36Z

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

-                <SelectItem text={questionType} value={questionType} key={key} />
-              ))}
-            </Select>
+            {questionToEdit.questionOptions.rendering !== 'markdown' && (


This seems very hacky. It probably makes sense to have some abstraction for "should render required fields" rather than just hard-coding "markdown" here.

@ibacher I think it might be easier to add this into the refactor

ibacher · 2024-10-25T14:42:44Z

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

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


This is an even weirder set of assumptions here, i.e., that any question without a label must be rendered via markdown. It would be better to check that the value is intended to be rendered in markdown.

@ibacher , does this imply that question type value can have other renderingTypes apart from markdown?

Maybe in the future, probably. It would be better to check the rendering type === markdown as a condition.

Updated this!

ibacher · 2024-10-25T14:42:58Z

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

@@ -69,6 +70,45 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
    }
  }, [handleDuplicateQuestion, isDragging, question, pageIndex, sectionIndex]);

+  const MarkdownWrapper: React.FC<{ markdown: string | Array<string> }> = ({ markdown }) => {


Split this out as it's own component in it's own file.

Updated this!

NethmiRodrigo · 2024-11-18T06:14:12Z

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

-                <SelectItem text={fieldType} value={fieldType} key={key} />
-              ))}
-            </Select>
+            {'label' in questionToEdit && (


Since every question has a label, although these fields are not required for markdown questions, they would get rendered, which doesn't happen in add-question-modal. We should change this condition to match the one we used in the add-question-modal

NethmiRodrigo · 2024-11-18T06:16:17Z

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

+                </Select>
+              </>
+            )}
+            {!questionToEdit.value && 


Why are we conditionally displaying the 'renderingType' field only when it has no value? If the intent is to prevent users from modifying the rendering type, we don't need to do that. Let's always display this field regardless.

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

package.json Outdated Show resolved Hide resolved

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

src/components/interactive-builder/add-question.modal.tsx Outdated Show resolved Hide resolved

NethmiRodrigo reviewed Oct 25, 2024

View reviewed changes

src/components/interactive-builder/edit-question.modal.tsx Outdated Show resolved Hide resolved

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

src/types.ts Show resolved Hide resolved

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

Closed

3 tasks

NethmiRodrigo reviewed Oct 25, 2024

View reviewed changes

src/types.ts Outdated Show resolved Hide resolved

Twiineenock added 3 commits October 25, 2024 18:05

question attribute value should have type any

01a5a9a

no-explicit-any for question attribute value

a34c7fb

control set as default type

be8822a

NethmiRodrigo requested changes Nov 1, 2024

View reviewed changes

question type should be required

9596868

NethmiRodrigo approved these changes Nov 1, 2024

View reviewed changes

Twiineenock added 2 commits November 1, 2024 15:56

update yarn.lock

deb634c

update yarn.lock

f751243

ibacher reviewed Nov 1, 2024

View reviewed changes

ibacher changed the title ~~feat (O3-3946): Add support for markdown questions~~ (feat) O3-3946: Add support for markdown questions Nov 1, 2024

Twiineenock and others added 3 commits November 1, 2024 17:11

update branch

af8d7b4

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

8591f6b

MarkdownWrapper should be in its own file

265dda8

NethmiRodrigo reviewed Nov 18, 2024

View reviewed changes

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

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 commented Oct 25, 2024

NethmiRodrigo Nov 1, 2024

NethmiRodrigo Nov 1, 2024

Twiineenock Nov 1, 2024

ibacher Nov 1, 2024

ibacher Nov 1, 2024

NethmiRodrigo commented Nov 1, 2024

ibacher Oct 25, 2024

NethmiRodrigo Nov 4, 2024

ibacher Oct 25, 2024

NethmiRodrigo Nov 4, 2024

ibacher Oct 25, 2024

Twiineenock Nov 1, 2024

NethmiRodrigo Nov 4, 2024

Twiineenock Nov 4, 2024

ibacher Oct 25, 2024

Twiineenock Nov 4, 2024

NethmiRodrigo Nov 18, 2024

NethmiRodrigo Nov 18, 2024

(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

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 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

NethmiRodrigo commented Nov 1, 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

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 commented Oct 14, 2024 •

edited by NethmiRodrigo

Loading

NethmiRodrigo commented Oct 22, 2024 •

edited

Loading

Twiineenock commented Oct 24, 2024 •

edited

Loading

NethmiRodrigo commented Oct 25, 2024 •

edited

Loading