From eb469f84f643e8043bec724a7d3fc4e4162042d8 Mon Sep 17 00:00:00 2001
From: TWIINE <122885804+Twiineenock@users.noreply.github.com>
Date: Sat, 7 Dec 2024 00:23:09 +0300
Subject: [PATCH] (feat) O3-3946: Add support for markdown questions (#355)

* feat: Add support from markdown questions

* Fix conditional statements

---------

Co-authored-by: Nethmi Rodrigo <neth23rodrigo@gmail.com>
---
 .eslintignore                                 |   2 +-
 .eslintrc                                     |   1 +
 __mocks__/react-markdown.tsx                  |   5 +
 jest.config.js                                |   1 +
 package.json                                  |   2 +
 .../add-question.modal.tsx                    | 104 ++---
 .../draggable-question.component.tsx          |   5 +-
 .../draggable-question.scss                   |   2 +-
 .../edit-question.modal.tsx                   | 102 ++---
 .../interactive-builder.component.tsx         |  64 +--
 .../interactive-builder.scss                  |   2 +-
 .../markdown-question.component.tsx           |  52 +++
 .../markdown-question.scss                    | 372 ++++++++++++++++++
 .../interactive-builder/markdown-wrapper.tsx  |  43 ++
 src/config-schema.ts                          |   1 +
 src/types.ts                                  |   4 +-
 yarn.lock                                     |  12 +
 17 files changed, 641 insertions(+), 133 deletions(-)
 create mode 100644 __mocks__/react-markdown.tsx
 create mode 100644 src/components/interactive-builder/markdown-question.component.tsx
 create mode 100644 src/components/interactive-builder/markdown-question.scss
 create mode 100644 src/components/interactive-builder/markdown-wrapper.tsx

diff --git a/.eslintignore b/.eslintignore
index 70f565b8..2b80a521 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,4 @@
 **/dist/*
 **/node_modules/*
 **/*.d.tsx
-__mocks__/*
+__mocks__/*
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index eef523ff..90988c21 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -21,6 +21,7 @@
     "import/no-duplicates": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react-hooks/rules-of-hooks": "error",
+    "@typescript-eslint/no-explicit-any": "off",
     // not hugely concerned about accidental implicit type coercions for now https://typescript-eslint.io/rules/no-base-to-string
     "@typescript-eslint/no-base-to-string": "off",
     // The following rules need `noImplicitAny` to be set to `true` in our tsconfig. They are too restrictive for now, but should be reconsidered in future
diff --git a/__mocks__/react-markdown.tsx b/__mocks__/react-markdown.tsx
new file mode 100644
index 00000000..430fb008
--- /dev/null
+++ b/__mocks__/react-markdown.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ({ children }) {
+  return <>{children}</>;
+}
diff --git a/jest.config.js b/jest.config.js
index 2aeb643a..bba5829e 100644
--- a/jest.config.js
+++ b/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',
   },
   setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
   testEnvironment: 'jsdom',
diff --git a/package.json b/package.json
index 4bfc6293..bae61adc 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,8 @@
     "fuzzy": "^0.1.3",
     "lodash-es": "^4.17.21",
     "react-ace": "^11.0.1",
+    "react-markdown": "^9.0.1",
+    "react-mde": "^11.5.0",
     "sass": "^1.67.0"
   },
   "peerDependencies": {
diff --git a/src/components/interactive-builder/add-question.modal.tsx b/src/components/interactive-builder/add-question.modal.tsx
index 110f8a9a..a7e48705 100644
--- a/src/components/interactive-builder/add-question.modal.tsx
+++ b/src/components/interactive-builder/add-question.modal.tsx
@@ -47,6 +47,7 @@ import { useConceptLookup } from '../../hooks/useConceptLookup';
 import { usePatientIdentifierTypes } from '../../hooks/usePatientIdentifierTypes';
 import { usePersonAttributeTypes } from '../../hooks/usePersonAttributeTypes';
 import { useProgramWorkStates, usePrograms } from '../../hooks/useProgramStates';
+import MarkdownQuestion from './markdown-question.component';
 import styles from './question-modal.scss';
 
 interface AddQuestionModalProps {
@@ -109,6 +110,7 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
   const [min, setMin] = useState('');
   const [questionId, setQuestionId] = useState('');
   const [questionLabel, setQuestionLabel] = useState('');
+  const [questionValue, setQuestionValue] = useState('');
   const [questionType, setQuestionType] = useState<QuestionType | null>(null);
   const [rows, setRows] = useState('');
   const [selectedAnswers, setSelectedAnswers] = useState<
@@ -149,7 +151,6 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
   const [toggleLabelFalse, setToggleLabelFalse] = useState('');
 
   const renderTypeOptions = {
-    control: ['text'],
     encounterDatetime: ['date'],
     encounterLocation: ['ui-select-extended'],
     encounterProvider: ['ui-select-extended'],
@@ -250,8 +251,9 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
       const computedQuestionId = `question${questionIndex + 1}Section${sectionIndex + 1}Page-${pageIndex + 1}`;
 
       const newQuestion = {
-        label: questionLabel,
-        type: questionType,
+        ...(questionLabel && {label: questionLabel}),
+        ...((renderingType === 'markdown') && {value: questionValue}),
+        type: questionType ? questionType : 'control',
         required: isQuestionRequired,
         id: questionId ?? computedQuestionId,
         ...((renderingType === 'date' || renderingType === 'datetime') &&
@@ -361,14 +363,15 @@ 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
               />
+              )}
 
               <TextInput
                 id="questionId"
@@ -400,45 +403,48 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
                 required
               />
 
-              <RadioButtonGroup
-                defaultSelected="optional"
-                name="isQuestionRequired"
-                legendText={t(
-                  'isQuestionRequiredOrOptional',
-                  'Is this question a required or optional field? Required fields must be answered before the form can be submitted.',
-                )}
-              >
-                <RadioButton
-                  id="questionIsNotRequired"
-                  defaultChecked={true}
-                  labelText={t('optional', 'Optional')}
-                  onClick={() => setIsQuestionRequired(false)}
-                  value="optional"
-                />
-                <RadioButton
-                  id="questionIsRequired"
-                  defaultChecked={false}
-                  labelText={t('required', 'Required')}
-                  onClick={() => setIsQuestionRequired(true)}
-                  value="required"
-                />
-              </RadioButtonGroup>
-
-              <Select
-                value={questionType}
-                onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-                  setQuestionType(event.target.value as QuestionType)
-                }
-                id="questionType"
-                invalidText={t('typeRequired', 'Type is required')}
-                labelText={t('questionType', 'Question type')}
-                required
-              >
-                {!questionType && <SelectItem text={t('chooseQuestionType', 'Choose a question type')} value="" />}
-                {questionTypes.map((questionType, key) => (
-                  <SelectItem text={questionType} value={questionType} key={key} />
-                ))}
-              </Select>
+              {renderingType !== 'markdown' && (
+                <>
+                  <RadioButtonGroup
+                    defaultSelected="optional"
+                    name="isQuestionRequired"
+                    legendText={t(
+                      'isQuestionRequiredOrOptional',
+                      'Is this question a required or optional field? Required fields must be answered before the form can be submitted.',
+                    )}
+                  >
+                    <RadioButton
+                      id="questionIsNotRequired"
+                      defaultChecked={true}
+                      labelText={t('optional', 'Optional')}
+                      onClick={() => setIsQuestionRequired(false)}
+                      value="optional"
+                    />
+                    <RadioButton
+                      id="questionIsRequired"
+                      defaultChecked={false}
+                      labelText={t('required', 'Required')}
+                      onClick={() => setIsQuestionRequired(true)}
+                      value="required"
+                    />
+                  </RadioButtonGroup>
+                  <Select
+                    value={questionType}
+                    onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                      setQuestionType(event.target.value as QuestionType)
+                    }
+                    id="questionType"
+                    invalidText={t('typeRequired', 'Type is required')}
+                    labelText={t('questionType', 'Question type')}
+                    required
+                  >
+                    {!questionType && <SelectItem text={t('chooseQuestionType', 'Choose a question type')} value="" />}
+                    {questionTypes.map((questionType, key) => (
+                      <SelectItem text={questionType} value={questionType} key={key} />
+                    ))}
+                  </Select>
+                </>
+              )}
 
               <Select
                 value={renderingType}
@@ -451,12 +457,13 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
                 required
               >
                 {!renderingType && <SelectItem text={t('chooseRenderingType', 'Choose a rendering type')} value="" />}
-
-                {questionTypes.filter((questionType) => questionType !== 'obs').includes(questionType)
+                {questionTypes.filter((questionType) => !['obs', 'control'].includes(questionType)).includes(questionType as Exclude<QuestionType, 'obs' | 'control'>)
                   ? renderTypeOptions[questionType].map((type, key) => (
                       <SelectItem key={`${questionType}-${key}`} text={type} value={type} />
                     ))
-                  : fieldTypes.map((type, key) => <SelectItem key={key} text={type} value={type} />)}
+                  : questionType === 'obs' 
+                    ? fieldTypes.filter(type => type !== 'markdown').map((type, key) => <SelectItem key={key} text={type} value={type} />) 
+                    : fieldTypes.map((type, key) => <SelectItem key={key} text={type} value={type} />)}
               </Select>
 
               {questionType === 'personAttribute' && (
@@ -1003,7 +1010,6 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
         </Button>
         <Button
           disabled={
-            !questionLabel ||
             !questionId ||
             questionIdExists(questionId) ||
             !renderingType ||
@@ -1031,4 +1037,4 @@ function RequiredLabel({ isRequired, text, t }: RequiredLabelProps) {
   );
 }
 
-export default AddQuestionModal;
+export default AddQuestionModal;
\ No newline at end of file
diff --git a/src/components/interactive-builder/draggable-question.component.tsx b/src/components/interactive-builder/draggable-question.component.tsx
index d2dce558..350b572b 100644
--- a/src/components/interactive-builder/draggable-question.component.tsx
+++ b/src/components/interactive-builder/draggable-question.component.tsx
@@ -7,6 +7,7 @@ import { CopyButton, IconButton } from '@carbon/react';
 import { Draggable, Edit, TrashCan } from '@carbon/react/icons';
 import { showModal } from '@openmrs/esm-framework';
 import type { Question, Schema } from '../../types';
+import MarkdownWrapper from './markdown-wrapper';
 import styles from './draggable-question.scss';
 
 interface DraggableQuestionProps {
@@ -89,7 +90,9 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
             <Draggable />
           </IconButton>
         </div>
-        <p className={styles.questionLabel}>{question.label}</p>
+        <p className={styles.questionLabel}>
+          {question.questionOptions.rendering === 'markdown' ? <MarkdownWrapper markdown={question.value} /> : question.label}
+        </p>
       </div>
       <div className={styles.buttonsContainer}>
         <CopyButton
diff --git a/src/components/interactive-builder/draggable-question.scss b/src/components/interactive-builder/draggable-question.scss
index 8431925f..6e6227e2 100644
--- a/src/components/interactive-builder/draggable-question.scss
+++ b/src/components/interactive-builder/draggable-question.scss
@@ -18,7 +18,7 @@
 
 .dragContainer {
   display: flex;
-  height: 3rem;
+  min-height: 3rem;
   justify-content: space-between;
   align-items: center;
   width: 100%;
diff --git a/src/components/interactive-builder/edit-question.modal.tsx b/src/components/interactive-builder/edit-question.modal.tsx
index 2a80d246..1fe3b492 100644
--- a/src/components/interactive-builder/edit-question.modal.tsx
+++ b/src/components/interactive-builder/edit-question.modal.tsx
@@ -54,6 +54,7 @@ import { usePersonAttributeName } from '../../hooks/usePersonAttributeName';
 import { usePersonAttributeTypes } from '../../hooks/usePersonAttributeTypes';
 import { usePrograms, useProgramWorkStates } from '../../hooks/useProgramStates';
 import { getDatePickerType } from './add-question.modal';
+import MarkdownQuestion from './markdown-question.component';
 import styles from './question-modal.scss';
 
 interface EditQuestionModalProps {
@@ -105,6 +106,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
   const [min, setMin] = useState(questionToEdit.questionOptions.min ?? '');
   const [questionId, setQuestionId] = useState('');
   const [questionLabel, setQuestionLabel] = useState('');
+  const [questionValue, setQuestionValue] = useState(questionToEdit.value);
   const [questionType, setQuestionType] = useState<QuestionType | null>(null);
   const [datePickerType, setDatePickerType] = useState<DatePickerType | null>(
     questionToEdit.datePickerFormat ?? 'both',
@@ -314,7 +316,8 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
 
     try {
       const data = {
-        label: questionLabel ? questionLabel : questionToEdit.label,
+        ...(questionLabel && { label: questionLabel }),
+        ...(questionValue && { value: questionValue }),
         type: questionType ? questionType : questionToEdit.type,
         required: isQuestionRequired ? isQuestionRequired : /true/.test(questionToEdit?.required?.toString()),
         id: questionId ? questionId : questionToEdit.id,
@@ -449,13 +452,16 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
       <Form className={styles.form} onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody hasScrollingContent>
           <Stack gap={5}>
-            <TextInput
-              defaultValue={questionToEdit.label}
-              id={questionToEdit.id}
-              labelText={t('questionLabel', 'Label')}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuestionLabel(event.target.value)}
-              required
-            />
+            {questionToEdit.questionOptions.rendering === 'markdown' || fieldType === 'markdown' ? (
+              <MarkdownQuestion placeholder={questionToEdit.value} onValueChange={setQuestionValue} />
+            ) : (
+              <TextInput
+                defaultValue={questionToEdit.label}
+                id={questionToEdit.id}
+                labelText={t('questionLabel', 'Label')}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuestionLabel(event.target.value)}
+              />
+            )}
             <TextInput
               defaultValue={questionToEdit.id}
               id="questionId"
@@ -472,44 +478,48 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
               )}
               required
             />
-            <RadioButtonGroup
-              defaultSelected={/true/.test(questionToEdit?.required?.toString()) ? 'required' : 'optional'}
-              name="isQuestionRequired"
-              legendText={t(
-                'isQuestionRequiredOrOptional',
-                'Is this question a required or optional field? Required fields must be answered before the form can be submitted.',
-              )}
-            >
-              <RadioButton
-                id="questionIsNotRequired"
-                defaultChecked={true}
-                labelText={t('optional', 'Optional')}
-                onClick={() => setIsQuestionRequired(false)}
-                value="optional"
-              />
-              <RadioButton
-                id="questionIsRequired"
-                defaultChecked={false}
-                labelText={t('required', 'Required')}
-                onClick={() => setIsQuestionRequired(true)}
-                value="required"
-              />
-            </RadioButtonGroup>
-            <Select
-              defaultValue={questionToEdit.type}
-              onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-                setQuestionType(event.target.value as QuestionType)
-              }
-              id={'questionType'}
-              invalidText={t('typeRequired', 'Type is required')}
-              labelText={t('questionType', 'Question type')}
-              required
-            >
-              {!questionType && <SelectItem text={t('chooseQuestionType', 'Choose a question type')} value="" />}
-              {questionTypes.map((questionType, key) => (
-                <SelectItem text={questionType} value={questionType} key={key} />
-              ))}
-            </Select>
+            {(questionToEdit.questionOptions.rendering !== 'markdown' || fieldType !== 'markdown') && (
+              <>
+                <RadioButtonGroup
+                  defaultSelected={/true/.test(questionToEdit?.required?.toString()) ? 'required' : 'optional'}
+                  name="isQuestionRequired"
+                  legendText={t(
+                    'isQuestionRequiredOrOptional',
+                    'Is this question a required or optional field? Required fields must be answered before the form can be submitted.',
+                  )}
+                >
+                  <RadioButton
+                    id="questionIsNotRequired"
+                    defaultChecked={true}
+                    labelText={t('optional', 'Optional')}
+                    onClick={() => setIsQuestionRequired(false)}
+                    value="optional"
+                  />
+                  <RadioButton
+                    id="questionIsRequired"
+                    defaultChecked={false}
+                    labelText={t('required', 'Required')}
+                    onClick={() => setIsQuestionRequired(true)}
+                    value="required"
+                  />
+                </RadioButtonGroup>
+                <Select
+                  defaultValue={questionToEdit.type}
+                  onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
+                    setQuestionType(event.target.value as QuestionType)
+                  }
+                  id={'questionType'}
+                  invalidText={t('typeRequired', 'Type is required')}
+                  labelText={t('questionType', 'Question type')}
+                  required
+                >
+                  {!questionType && <SelectItem text={t('chooseQuestionType', 'Choose a question type')} value="" />}
+                  {questionTypes.map((questionType, key) => (
+                    <SelectItem text={questionType} value={questionType} key={key} />
+                  ))}
+                </Select>
+              </>
+            )}
             <Select
               defaultValue={questionToEdit.questionOptions.rendering}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) => setFieldType(event.target.value as RenderType)}
diff --git a/src/components/interactive-builder/interactive-builder.component.tsx b/src/components/interactive-builder/interactive-builder.component.tsx
index f2de0241..68bd2e20 100644
--- a/src/components/interactive-builder/interactive-builder.component.tsx
+++ b/src/components/interactive-builder/interactive-builder.component.tsx
@@ -437,38 +437,38 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
                               {section.questions?.length ? (
                                 section.questions.map((question, questionIndex) => {
                                   return (
-                                    <Droppable
-                                      id={`droppable-question-${pageIndex}-${sectionIndex}-${questionIndex}`}
-                                      key={questionIndex}
-                                    >
-                                      <DraggableQuestion
-                                        handleDuplicateQuestion={duplicateQuestion}
-                                        key={question.id}
-                                        onSchemaChange={onSchemaChange}
-                                        pageIndex={pageIndex}
-                                        question={question}
-                                        questionCount={section.questions.length}
-                                        questionIndex={questionIndex}
-                                        schema={schema}
-                                        sectionIndex={sectionIndex}
-                                      />
-                                      {getValidationError(question) && (
-                                        <div className={styles.validationErrorMessage}>
-                                          {getValidationError(question)}
-                                        </div>
-                                      )}
-                                      {getAnswerErrors(question.questionOptions.answers)?.length ? (
-                                        <div className={styles.answerErrors}>
-                                          <div>Answer Errors</div>
-                                          {getAnswerErrors(question.questionOptions.answers)?.map((error, index) => (
-                                            <div
-                                              className={styles.validationErrorMessage}
-                                              key={index}
-                                            >{`${error.field.label}: ${error.errorMessage}`}</div>
-                                          ))}
-                                        </div>
-                                      ) : null}
-                                    </Droppable>
+                                      <Droppable
+                                        id={`droppable-question-${pageIndex}-${sectionIndex}-${questionIndex}`}
+                                        key={questionIndex}
+                                      >
+                                        <DraggableQuestion
+                                          handleDuplicateQuestion={duplicateQuestion}
+                                          key={question.id}
+                                          onSchemaChange={onSchemaChange}
+                                          pageIndex={pageIndex}
+                                          question={question}
+                                          questionCount={section.questions.length}
+                                          questionIndex={questionIndex}
+                                          schema={schema}
+                                          sectionIndex={sectionIndex}
+                                        />
+                                        {getValidationError(question) && (
+                                          <div className={styles.validationErrorMessage}>
+                                            {getValidationError(question)}
+                                          </div>
+                                        )}
+                                        {getAnswerErrors(question.questionOptions.answers)?.length ? (
+                                          <div className={styles.answerErrors}>
+                                            <div>Answer Errors</div>
+                                            {getAnswerErrors(question.questionOptions.answers)?.map((error, index) => (
+                                              <div
+                                                className={styles.validationErrorMessage}
+                                                key={index}
+                                              >{`${error.field.label}: ${error.errorMessage}`}</div>
+                                            ))}
+                                          </div>
+                                        ) : null}
+                                      </Droppable>
                                   );
                                 })
                               ) : (
diff --git a/src/components/interactive-builder/interactive-builder.scss b/src/components/interactive-builder/interactive-builder.scss
index c92fa47b..09f864bd 100644
--- a/src/components/interactive-builder/interactive-builder.scss
+++ b/src/components/interactive-builder/interactive-builder.scss
@@ -113,4 +113,4 @@
   margin-left: 2rem;
   margin-top: 1rem;
   font-size: 0.75rem;
-}
+}
\ No newline at end of file
diff --git a/src/components/interactive-builder/markdown-question.component.tsx b/src/components/interactive-builder/markdown-question.component.tsx
new file mode 100644
index 00000000..d9973b67
--- /dev/null
+++ b/src/components/interactive-builder/markdown-question.component.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactMde from 'react-mde';
+import ReactMarkdown from 'react-markdown';
+import styles from './markdown-question.scss';
+
+interface MarkdownQuestionProps {
+  placeholder?: string;
+  onValueChange: (value: string) => void;
+}
+
+const MarkdownQuestion: React.FC<MarkdownQuestionProps> = ({ placeholder, onValueChange }) => {
+  const [value, setValue] = React.useState(placeholder || "");
+  const [selectedTab, setSelectedTab] = React.useState<"write" | "preview">("write");
+
+  const handleEditorChange = (newValue: string) => {
+    setValue(newValue);
+    onValueChange(newValue);
+  };
+
+  const handleTabChange = () => {
+    setSelectedTab((prevTab) => (prevTab === "write" ? "preview" : "write"));
+  };
+
+  return (
+    <div className={styles.container}>
+      <ReactMde
+        value={value}
+        onChange={handleEditorChange}
+        selectedTab={selectedTab}
+        onTabChange={handleTabChange}
+        toolbarCommands={[
+          ["bold", "italic"]
+        ]}
+        generateMarkdownPreview={(markdown) =>
+          Promise.resolve(
+            <ReactMarkdown
+              children={Array.isArray(markdown) ? markdown.join('\n') : markdown}
+            />
+          )
+        }
+        childProps={{
+          writeButton: {
+            tabIndex: -1
+          }
+        }}
+        loadingPreview='loading preview...'
+      />
+    </div>
+  );
+}
+
+export default MarkdownQuestion;
\ No newline at end of file
diff --git a/src/components/interactive-builder/markdown-question.scss b/src/components/interactive-builder/markdown-question.scss
new file mode 100644
index 00000000..5e70fabe
--- /dev/null
+++ b/src/components/interactive-builder/markdown-question.scss
@@ -0,0 +1,372 @@
+// These styles are copied from 'node_modules/react-mde/lib/styles/scss/react-mde-all.scss' 
+$mde-border-radius:                 2px !default;
+$mde-white-color:                   white !default;
+$mde-border-color:                  #c8ccd0 !default;
+$mde-button-color:                  #242729 !default;
+$mde-toolbar-color:                 #f9f9f9 !default;
+$mde-selected-color:                      #0366d6 !default;
+$mde-toolbar-padding:               10px !default;
+$mde-editor-default-min-height:     200px !default;
+$mde-editor-padding:                10px !default;
+$mde-preview-horizontal-padding:    10px !default;
+$mde-preview-padding:               10px !default;
+$mde-preview-default-min-height:    $mde-editor-default-min-height !default;
+$mde-preview-default-height:        auto !default;
+
+.container {
+  position: relative;
+}
+
+.markdownPlaceholder {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  color: #888;
+  pointer-events: none; /* Allows click-through to editor */
+  font-size: 14px;
+}
+
+:global(.mde-header) {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: stretch;
+  border-bottom: 1px solid $mde-border-color;
+  border-radius: $mde-border-radius $mde-border-radius 0 0;
+  background: $mde-toolbar-color;
+
+  :global(.mde-tabs) {
+    display: flex;
+    flex-direction: row;
+
+    button {
+      border-radius: $mde-border-radius;
+      margin: 6px 3px;
+      background-color: transparent;
+      border: 1px solid transparent;
+      cursor: pointer;
+      &:first-child {
+        margin-left: 6px;
+      }
+      &:global(.selected) {
+        border: 1px solid $mde-border-color
+      }
+    }
+  }
+
+  :global(.svg-icon) {
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    font-size: inherit;
+    overflow: visible;
+    vertical-align: -.125em;
+  }
+
+  ul:global(.mde-header-group) {
+    display: flex !important;
+    flex-direction: row;
+    margin: 0;
+    padding: $mde-toolbar-padding;
+    list-style: none;
+    display: flex;
+    flex-wrap: nowrap;
+
+    &:global(.hidden) {
+      visibility: hidden;
+    }
+
+    li:global(.mde-header-item) {
+      display: inline-block;
+      position: relative;
+      margin: 0 4px;
+      button {
+        text-align: left;
+        cursor: pointer;
+        height: 22px;
+        padding: 4px;
+        margin: 0;
+        border: none;
+        background: none;
+        color: $mde-button-color;
+        @keyframes tooltip-appear {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+        @mixin tooltip-animation {
+          animation-name: tooltip-appear;
+          animation-duration: 0.2s;
+          animation-delay: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        &:global(.tooltipped) {
+          &:hover::before {
+            @include tooltip-animation();
+            opacity: 0;
+            position: absolute;
+            z-index: 1000001;
+            width: 0;
+            height: 0;
+            color: rgba(0, 0, 0, 0.8);
+            pointer-events: none;
+            content: "";
+            border: 5px solid transparent;
+            top: -5px;
+            right: 50%;
+            bottom: auto;
+            margin-right: -5px;
+            border-top-color: rgba(0, 0, 0, 0.8);
+          }
+          &:hover::after {
+            @include tooltip-animation();
+            font-size: 11px;
+            opacity: 0;
+            position: absolute;
+            z-index: 1000000;
+            padding: 5px 8px;
+            color: #fff;
+            pointer-events: none;
+            content: attr(aria-label);
+            background: rgba(0, 0, 0, 0.8);
+            border-radius: 3px;
+            right: 50%;
+            bottom: 100%;
+            transform: translateX(50%);
+            margin-bottom: 5px;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+}
+
+:global(.mde-textarea-wrapper) {
+  position: relative;
+  margin: 2px;
+
+  textarea:global(.mde-text) {
+    width: 100%;
+    border: 0;
+    padding: $mde-editor-padding;
+    vertical-align: top;
+    resize: vertical;
+    height: auto;
+    overflow-y: auto;
+    max-height: 200px;
+  }
+
+  textarea:focus {
+    border: 2px solid blue !important;
+    border-radius: 3px;
+    outline: none;
+  }
+}
+
+:global(.mde-preview) {
+  :global(.mde-preview-content) {
+    padding: $mde-preview-padding;
+
+    p, blockquote, ul, ol, dl, table, pre {
+      margin-top: 0;
+      margin-bottom: 16px;
+    }
+
+    h1, h2, h3 {
+      margin-top: 24px;
+      margin-bottom: 16px;
+      font-weight: 600;
+      line-height: 1.25;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 0.3em;
+    }
+    h1 {
+      font-size: 1.6em;
+    }
+    h2 {
+      font-size: 1.4em;
+    }
+    h3 {
+      font-size: 1.2em;
+    }
+    ul, ol {
+      padding-left: 2em;
+    }
+    blockquote {
+      margin-left: 0;
+      padding: 0 1em;
+      color: #777;
+      border-left: 0.25em solid #ddd;
+      & > :first-child {
+        margin-top: 0;
+      }
+      & > :last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    code {
+      padding: 0.2em 0 0.2em 0;
+      margin: 0;
+      font-size: 90%;
+      background-color: rgba(0, 0, 0, 0.04);
+      border-radius: 3px;
+      &::before, &::after {
+        letter-spacing: -0.2em;
+        content: "\00a0";
+      }
+    }
+
+    pre {
+      padding: 16px;
+      overflow: auto;
+      font-size: 85%;
+      line-height: 1.45;
+      background-color: #f7f7f7;
+      border-radius: 3px;
+
+      code {
+        display: inline;
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+        line-height: inherit;
+        word-wrap: normal;
+        background-color: transparent;
+        border: 0;
+        &::before, &::after {
+          content: none;
+        }
+      }
+
+      > code {
+        padding: 0;
+        margin: 0;
+        font-size: 100%;
+        word-break: normal;
+        white-space: pre;
+        background: transparent;
+        border: 0;
+      }
+    }
+
+    a {
+      color: #4078c0;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    & > *:first-child {
+      margin-top: 0 !important;
+    }
+    & > *:last-child {
+      margin-bottom: 0 !important;
+    }
+    &::after {
+      display: table;
+      clear: both;
+      content: "";
+    }
+
+    table {
+      display: block;
+      width: 100%;
+      border-spacing: 0;
+      border-collapse: collapse;
+      thead {
+        th {
+          font-weight: bold;
+        }
+      }
+      th, td {
+        padding: 6px 13px;
+        border: 1px solid $mde-border-color;
+      }
+    }
+  }
+}
+
+:global(.react-mde) {
+  border: 1px solid $mde-border-color;
+  border-radius: $mde-border-radius;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  :global(.invisible) {
+    display: none;
+  }
+
+  :global(.image-tip) {
+    user-select: none;
+    display: flex !important;
+    padding: 7px 10px;
+    margin: 0;
+    font-size: 13px;
+    line-height: 16px;
+    color: gray;
+    background-color: $mde-toolbar-color;
+    border-top: 1px solid $mde-border-color;
+    position: relative;
+
+    :global(.image-input) {
+      min-height: 0;
+      opacity: .01;
+      width: 100% !important;
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 5px;
+      cursor: pointer;
+    }
+  }
+}
+
+ul:global(.mde-suggestions) {
+  position: absolute;
+  min-width: 180px;
+  padding: 0;
+  margin: 20px 0 0;
+  list-style: none;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid $mde-border-color;
+  border-radius: 3px;
+  box-shadow: 0 1px 5px rgba(27, 31, 35, .15);
+  background-color: blue !important;
+
+  li {
+    padding: 4px 8px;
+    border-bottom: 1px solid #e1e4e8;
+
+    &:first-child {
+      border-top-left-radius: $mde-border-radius;
+      border-top-right-radius: $mde-border-radius;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: $mde-border-radius;
+      border-bottom-left-radius: $mde-border-radius;
+    }
+
+    &:hover, &[aria-selected=true] {
+      color: $mde-white-color;
+      background-color: $mde-selected-color;
+    }
+  }
+}
+
+:global(sub) {
+  vertical-align: sub;
+}
+:global(sup) {
+  vertical-align: super;
+}
\ No newline at end of file
diff --git a/src/components/interactive-builder/markdown-wrapper.tsx b/src/components/interactive-builder/markdown-wrapper.tsx
new file mode 100644
index 00000000..bb35df56
--- /dev/null
+++ b/src/components/interactive-builder/markdown-wrapper.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import ReactMarkdown from 'react-markdown';
+
+const MarkdownWrapper: React.FC<{ markdown: string | Array<string> }> = ({ markdown }) => {
+  const delimiters = ['***', '**', '*', '__', '_'];
+
+  function shortenMarkdownText(markdown: string | Array<string>, limit: number, delimiters: Array<string>) {
+    const inputString = Array.isArray(markdown) ? markdown.join('\n') : markdown;
+    let truncatedContent = inputString.length <= limit ? inputString : inputString.slice(0, limit).trimEnd();
+    const delimiterPattern = /[*_#]+$/;
+    if (delimiterPattern.test(truncatedContent)) {
+      truncatedContent = truncatedContent.replace(delimiterPattern, '').trimEnd();
+    }
+    let mutableString = truncatedContent
+    const unmatchedDelimiters = [];
+    
+    for (const delimiter of delimiters) {
+        const firstIndex = mutableString.indexOf(delimiter);
+        const secondIndex = mutableString.indexOf(delimiter, firstIndex + delimiter.length);
+        if (firstIndex !== -1) {
+            if (secondIndex === -1) {
+                unmatchedDelimiters.push(delimiter);
+                mutableString = mutableString.replace(delimiter, '');
+            } else {
+                mutableString = mutableString.replace(delimiter, '').replace(delimiter, '');
+            }
+        }
+    }
+    return truncatedContent + unmatchedDelimiters.reverse().join('') + (inputString.length > limit ? ' ...' : '');
+  }
+
+  const shortMarkdownText = shortenMarkdownText(markdown, 15, delimiters);
+
+  return (
+    <ReactMarkdown
+      children={shortMarkdownText}
+      unwrapDisallowed={true}
+      allowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'strong', 'em']}
+    />
+  );
+};
+
+export default MarkdownWrapper;
\ No newline at end of file
diff --git a/src/config-schema.ts b/src/config-schema.ts
index 07789090..fe479ebc 100644
--- a/src/config-schema.ts
+++ b/src/config-schema.ts
@@ -41,6 +41,7 @@ export const configSchema = {
       'textarea',
       'ui-select-extended',
       'toggle',
+      'markdown'
     ],
   },
   showSchemaSaveWarning: {
diff --git a/src/types.ts b/src/types.ts
index 1aa29048..95eaab81 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -69,7 +69,7 @@ export interface Schema {
       questions: Array<{
         id: string;
         label?: string;
-        value?: string;
+        value?: any;
         type: string;
         required?: string | boolean | RequiredFieldProps;
         questionOptions: {
@@ -123,7 +123,7 @@ export interface Section {
 export interface Question {
   id: string;
   label?: string;
-  value?: string;
+  value?: any;
   type: string;
   questionOptions: QuestionOptions;
   datePickerFormat?: DatePickerType;
diff --git a/yarn.lock b/yarn.lock
index d96cc451..cd5f8f86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3471,6 +3471,8 @@ __metadata:
     react-dom: "npm:^18.3.1"
     react-error-boundary: "npm:^4.0.13"
     react-i18next: "npm:^11.18.6"
+    react-markdown: "npm:^9.0.1"
+    react-mde: "npm:^11.5.0"
     rxjs: "npm:^6.6.7"
     sass: "npm:^1.67.0"
     swc-loader: "npm:^0.2.6"
@@ -17346,6 +17348,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-mde@npm:^11.5.0":
+  version: 11.5.0
+  resolution: "react-mde@npm:11.5.0"
+  peerDependencies:
+    react: ^17.0.0
+    react-dom: ^17.0.0
+  checksum: 10/0ba860835009b6fe90c8b440bb8f469d7cf3cb335a0dc6a6003a358a91dde9dbf4597fb024f831a78fafa6c51065f45238b2075f453f81dd06507ad22d132924
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:^6.3.0":
   version: 6.27.0
   resolution: "react-router-dom@npm:6.27.0"