Add markdown as rendering type

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

@@ -48,7 +48,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 MarkdownQuestion from './modals/question/question-form/rendering-types/inputs/markdown/markdown.component';
 import styles from './question-modal.scss';
 
 interface AddQuestionModalProps {

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

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { CopyButton, IconButton } from '@carbon/react';
 import { Draggable, Edit, TrashCan } from '@carbon/react/icons';
 import { showModal } from '@openmrs/esm-framework';
-import MarkdownWrapper from '../markdown-wrapper';
+import MarkdownWrapper from '../markdown-wrapper/markdown-wrapper';
 import type { Question, Schema } from '@types';
 import styles from './draggable-question.scss';
 

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

@@ -54,7 +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 MarkdownQuestion from './modals/question/question-form/rendering-types/inputs/markdown/markdown.component';
 import styles from './question-modal.scss';
 
 interface EditQuestionModalProps {

src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/index.tsx

@@ -4,3 +4,4 @@ export { default as Text } from './text/text.component';
 export { default as TextArea } from './text-area/textarea.component';
 export { default as Toggle } from './toggle/toggle.component';
 export { default as UiSelectExtended } from './ui-select-extended/ui-select-extended.component';
+export { default as Markdown } from './markdown/markdown.component';

src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/markdown/markdown.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactMde from 'react-mde';
+import ReactMarkdown from 'react-markdown';
+import type { ComponentProps } from '@types';
+import styles from './markdown.scss';
+
+const MarkdownQuestion: React.FC<ComponentProps> = ({ formField, setFormField }) => {
+  const [selectedTab, setSelectedTab] = React.useState<'write' | 'preview'>('write');
+
+  const handleEditorChange = (newValue: string) => {
+    const updatedFormField = { ...formField, value: newValue };
+    setFormField(updatedFormField);
+  };
+
+  const handleTabChange = () => {
+    setSelectedTab((prevTab) => (prevTab === 'write' ? 'preview' : 'write'));
+  };
+
+  return (
+    <div className={styles.container}>
+      <ReactMde
+        value={formField.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;

src/components/interactive-builder/modals/question/question-form/rendering-types/rendering-type.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Date, Number, Text, TextArea, Toggle, UiSelectExtended } from './inputs';
+import { Date, Markdown, Number, Text, TextArea, Toggle, UiSelectExtended } from './inputs';
 import type { RenderType } from '@openmrs/esm-form-engine-lib';
 import type { ComponentProps } from '@types';
 import { renderTypeOptions, renderingTypes } from '@constants';
@@ -12,6 +12,7 @@ const componentMap: Partial<Record<RenderType, React.FC<ComponentProps>>> = {
   'ui-select-extended': UiSelectExtended,
   date: Date,
   datetime: Date,
+  markdown: Markdown,
 };
 
 const RenderTypeComponent: React.FC<ComponentProps> = ({ formField, setFormField }) => {