MarkdownWrapper should be in its own file

openmrs · Nov 4, 2024 · 265dda8 · 265dda8
1 parent 8591f6b
commit 265dda8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 42 deletions.
diff --git a/src/components/interactive-builder/draggable-question.component.tsx b/src/components/interactive-builder/draggable-question.component.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import ReactMarkdown from 'react-markdown';
 import classNames from 'classnames';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
@@ -8,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 {
@@ -70,45 +70,6 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
     }
   }, [handleDuplicateQuestion, isDragging, question, pageIndex, sectionIndex]);
 
-  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']}
-      />
-    );
-  };
-
   return (
     <div
       className={classNames({
@@ -130,7 +91,7 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
           </IconButton>
         </div>
         <p className={styles.questionLabel}>
-          {question.label ? question.label : <MarkdownWrapper markdown={question.value} />}
+          {question.questionOptions.rendering === 'markdown' ? <MarkdownWrapper markdown={question.value} /> : question.label}
         </p>
       </div>
       <div className={styles.buttonsContainer}>

diff --git a/src/components/interactive-builder/edit-question.modal.tsx b/src/components/interactive-builder/edit-question.modal.tsx
@@ -401,7 +401,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
               )}
               required
             />
-            {questionToEdit.questionOptions.rendering !== 'markdown' && (
+            {'label' in questionToEdit && (
               <>
                 <RadioButtonGroup
                   defaultSelected={/true/.test(questionToEdit?.required?.toString()) ? 'required' : 'optional'}

diff --git a/src/components/interactive-builder/markdown-wrapper.tsx 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;