Merge pull request #127 from ets-cfuhrman-pfe/fuhrmanator/issue79

Fuhrmanator/issue79
ets-cfuhrman-pfe · Sep 24, 2024 · fd68131 · fd68131
2 parents 3ec84ad + ebb526a
commit fd68131
Show file tree

Hide file tree

Showing 20 changed files with 274 additions and 286 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -31,7 +31,6 @@
         "nanoid": "^5.0.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-latex": "^2.0.0",
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.26.2",
         "remark-math": "^6.0.0",

diff --git a/client/src/__tests__/components/GiftTemplate/TextType.test.ts b/client/src/__tests__/components/GiftTemplate/TextType.test.ts
@@ -1,7 +1,7 @@
 // TextType.test.ts
 
 import { TextFormat } from "gift-pegjs";
-import TextType from "../../../components/GiftTemplate/templates/TextType";
+import textType from "../../../components/GiftTemplate/templates/TextType";
 
 describe('TextType', () => {
     it('should format text with basic characters correctly', () => {
@@ -10,7 +10,7 @@ describe('TextType', () => {
             format: 'plain'
         };
         const expectedOutput = 'Hello, world! 5 > 3, right?';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     it('should format text with newlines correctly', () => {
@@ -19,7 +19,7 @@ describe('TextType', () => {
             format: 'plain'
         };
         const expectedOutput = 'Hello,<br>world!<br>5 > 3, right?';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     it('should format text with LaTeX correctly', () => {
@@ -33,7 +33,7 @@ describe('TextType', () => {
         //   by running the test and copying the "Received string:" in jest output 
         //   when it fails (assuming the output is correct)
         const expectedOutput = '<span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding=\"application/x-tex\">E=mc^2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6833em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.05764em;\">E</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.8641em;\"></span><span class=\"mord mathnormal\">m</span><span class=\"mord\"><span class=\"mord mathnormal\">c</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8641em;\"><span style=\"top:-3.113em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span></span></span></span></span>'; 
-        expect(TextType({ text: input })).toContain(expectedOutput);
+        expect(textType({ text: input })).toContain(expectedOutput);
     });
 
     it('should format text with two equations (inline and separate) correctly', () => {
@@ -43,7 +43,7 @@ describe('TextType', () => {
         };
         // hint: katex-display is the class that indicates a separate equation
         const expectedOutput = '<span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mo>=</mo><mi>c</mi></mrow><annotation encoding=\"application/x-tex\">a + b = c</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6667em;vertical-align:-0.0833em;\"></span><span class=\"mord mathnormal\">a</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.6944em;\"></span><span class=\"mord mathnormal\">b</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.4306em;\"></span><span class=\"mord mathnormal\">c</span></span></span></span> ? <span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\" display=\"block\"><semantics><mrow><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding=\"application/x-tex\">E=mc^2</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.6833em;\"></span><span class=\"mord mathnormal\" style=\"margin-right:0.05764em;\">E</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.8641em;\"></span><span class=\"mord mathnormal\">m</span><span class=\"mord\"><span class=\"mord mathnormal\">c</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.8641em;\"><span style=\"top:-3.113em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span></span></span></span></span>';
-        expect(TextType({ text: input })).toContain(expectedOutput);
+        expect(textType({ text: input })).toContain(expectedOutput);
     });
 
     it('should format text with a katex matrix correctly', () => {
@@ -55,7 +55,7 @@ describe('TextType', () => {
             format: 'plain'
         };
         const expectedOutput = 'Donnez le déterminant de la matrice suivante.<span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow></mrow><annotation encoding=\"application/x-tex\"></annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"></span></span>\\begin{pmatrix}<br>   a&b \\\\<br>   c&d<br>\\end{pmatrix}';
-        expect(TextType({ text: input })).toContain(expectedOutput);
+        expect(textType({ text: input })).toContain(expectedOutput);
     });
 
     it('should format text with Markdown correctly', () => {
@@ -65,7 +65,7 @@ describe('TextType', () => {
         };
         // TODO: investigate why the output has an extra newline
         const expectedOutput = '<strong>Bold</strong>\n';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     it('should format text with HTML correctly', () => {
@@ -74,7 +74,7 @@ describe('TextType', () => {
             format: 'html'
         };
         const expectedOutput = '<em>yes</em>';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     it('should format plain text correctly', () => {
@@ -83,7 +83,7 @@ describe('TextType', () => {
             format: 'plain'
         };
         const expectedOutput = 'Just plain text';
-        expect(TextType({ text: input })).toBe(expectedOutput);
+        expect(textType({ text: input })).toBe(expectedOutput);
     });
 
     // Add more tests for other formats if needed

diff --git a/client/src/components/GiftTemplate/templates/Description.ts b/client/src/components/GiftTemplate/templates/Description.ts
@@ -1,7 +1,7 @@
 import { TemplateOptions, Description as DescriptionType } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import { ParagraphStyle } from '../constants';
 import { state } from '.';
 
@@ -14,7 +14,7 @@ export default function Description({ title, stem }: DescriptionOptions): string
                 type: 'Description',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`
         ]

diff --git a/client/src/components/GiftTemplate/templates/Essay.ts b/client/src/components/GiftTemplate/templates/Essay.ts
@@ -1,7 +1,7 @@
 import { TemplateOptions, Essay as EssayType } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import { ParagraphStyle, TextAreaStyle } from '../constants';
 import { state } from '.';
@@ -15,7 +15,7 @@ export default function Essay({ title, stem, globalFeedback }: EssayOptions): st
                 type: 'Développement',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             `<textarea class="gift-textarea" style="${TextAreaStyle(

diff --git a/client/src/components/GiftTemplate/templates/GlobalFeedback.ts b/client/src/components/GiftTemplate/templates/GlobalFeedback.ts
@@ -1,5 +1,5 @@
 import { TemplateOptions, Question } from './types';
-import TextType from './TextType';
+import textType from './TextType';
 import { state } from '.';
 import { theme } from '../constants';
 
@@ -21,7 +21,7 @@ export default function GlobalFeedback({ feedback }: GlobalFeedbackOptions): str
 
     return feedback !== null
         ? `<div style="${Container}">
-        <p>${TextType({ text: feedback })}</p>
+        <p>${textType({ text: feedback })}</p>
       </div>`
         : ``;
 }
diff --git a/client/src/components/GiftTemplate/templates/Matching.ts b/client/src/components/GiftTemplate/templates/Matching.ts
@@ -1,7 +1,7 @@
 import { TemplateOptions, Matching as MatchingType } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import { ParagraphStyle, SelectStyle } from '../constants';
 import { state } from '.';
@@ -24,7 +24,7 @@ export default function Matching({
                 type: 'Appariement',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             MatchAnswers({ choices: matchPairs }),
@@ -67,7 +67,7 @@ function MatchAnswers({ choices }: MatchAnswerOptions): string {
         .map(({ subquestion }) => {
             return `
           <div style="${OptionTable} ${ParagraphStyle(state.theme)}">
-            ${TextType({ text: subquestion })} 
+            ${textType({ text: subquestion })} 
           </div>
           <div>
             <select class="gift-select" style="${SelectStyle(state.theme)} ${Dropdown}">

diff --git a/client/src/components/GiftTemplate/templates/MultipleChoice.ts b/client/src/components/GiftTemplate/templates/MultipleChoice.ts
@@ -2,7 +2,7 @@ import { TemplateOptions, MultipleChoice as MultipleChoiceType } from './types';
 import QuestionContainer from './QuestionContainer';
 import GlobalFeedback from './GlobalFeedback';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import MultipleChoiceAnswers from './MultipleChoiceAnswers';
 import { ParagraphStyle } from '../constants';
 import { state } from '.';
@@ -21,7 +21,7 @@ export default function MultipleChoice({
                 type: 'Choix multiple',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             MultipleChoiceAnswers({ choices: choices }),

diff --git a/client/src/components/GiftTemplate/templates/MultipleChoiceAnswers.ts b/client/src/components/GiftTemplate/templates/MultipleChoiceAnswers.ts
@@ -1,6 +1,6 @@
 import { nanoid } from 'nanoid';
 import { TemplateOptions, TextFormat, Choice, MultipleChoice as MultipleChoiceType } from './types';
-import TextType from './TextType';
+import textType from './TextType';
 import AnswerIcon from './AnswerIcon';
 import { state } from '.';
 import { ParagraphStyle, theme } from '../constants';
@@ -41,7 +41,7 @@ export default function MultipleChoiceAnswers({ choices }: MultipleChoiceAnswerO
           }" id="${inputId}" name="${id}">
           ${AnswerWeight({ correct: isCorrectOption, weight: weight })}
             <label style="${CustomLabel} ${ParagraphStyle(state.theme)}" for="${inputId}">
-            ${TextType({ text: text as TextFormat })}
+            ${textType({ text: text as TextFormat })}
             </label>
           ${AnswerIcon({ correct: isCorrectOption })}
           ${AnswerFeedback({ feedback: feedback })}
@@ -85,5 +85,5 @@ function AnswerFeedback({ feedback }: AnswerFeedbackOptions): string {
       color: ${theme(state.theme, 'teal700', 'gray700')};
     `;
 
-    return feedback ? `<span style="${Container}">${TextType({ text: feedback })}</span>` : ``;
+    return feedback ? `<span style="${Container}">${textType({ text: feedback })}</span>` : ``;
 }
diff --git a/client/src/components/GiftTemplate/templates/Numerical.ts b/client/src/components/GiftTemplate/templates/Numerical.ts
@@ -1,7 +1,7 @@
 import { TemplateOptions, Numerical as NumericalType, NumericalFormat } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import { ParagraphStyle, InputStyle } from '../constants';
 import { state } from '.';
@@ -21,7 +21,7 @@ export default function Numerical({
                 type: 'Numérique',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             NumericalAnswers({ choices: choices }),

diff --git a/client/src/components/GiftTemplate/templates/ShortAnswer.ts b/client/src/components/GiftTemplate/templates/ShortAnswer.ts
@@ -1,7 +1,7 @@
 import { TemplateOptions, ShortAnswer as ShortAnswerType, TextFormat } from './types';
 import QuestionContainer from './QuestionContainer';
 import Title from './Title';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import { ParagraphStyle, InputStyle } from '../constants';
 import { state } from './index';
@@ -21,7 +21,7 @@ export default function ShortAnswer({
                 type: 'Réponse courte',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             Answers({ choices: choices }),
@@ -32,7 +32,7 @@ export default function ShortAnswer({
 
 function Answers({ choices }: AnswerOptions): string {
     const placeholder = choices
-        .map(({ text }) => TextType({ text: text as TextFormat }))
+        .map(({ text }) => textType({ text: text as TextFormat }))
         .join(', ');
     return `
     <div>

diff --git a/client/src/components/GiftTemplate/templates/TextType.ts b/client/src/components/GiftTemplate/templates/TextType.ts
@@ -6,7 +6,7 @@ interface TextTypeOptions extends TemplateOptions {
     text: TextFormat;
 }
 
-function formatLatex(text: string): string {
+export function formatLatex(text: string): string {
     return text
         .replace(/\$\$(.*?)\$\$/g, (_, inner) => katex.renderToString(inner, { displayMode: true }))
         .replace(/\$(.*?)\$/g, (_, inner) => katex.renderToString(inner, { displayMode: false }))
@@ -28,7 +28,7 @@ function formatLatex(text: string): string {
  * @see marked
  * @see katex
  */
-export default function TextType({ text }: TextTypeOptions) {
+export default function textType({ text }: TextTypeOptions) {
     const formatText = formatLatex(text.text.trim());  // latex needs pure "&", ">", etc. Must not be escaped
 
     switch (text.format) {

diff --git a/client/src/components/GiftTemplate/templates/TrueFalse.ts b/client/src/components/GiftTemplate/templates/TrueFalse.ts
@@ -1,6 +1,6 @@
 import { TemplateOptions, TextChoice, TrueFalse as TrueFalseType } from './types';
 import QuestionContainer from './QuestionContainer';
-import TextType from './TextType';
+import textType from './TextType';
 import GlobalFeedback from './GlobalFeedback';
 import MultipleChoiceAnswers from './MultipleChoiceAnswers';
 import Title from './Title';
@@ -44,7 +44,7 @@ export default function TrueFalse({
                 type: 'Vrai/Faux',
                 title: title
             }),
-            `<p style="${ParagraphStyle(state.theme)}">${TextType({
+            `<p style="${ParagraphStyle(state.theme)}">${textType({
                 text: stem
             })}</p>`,
             MultipleChoiceAnswers({ choices: choices }),