From 3a3c6ee122095a8239cb803d61ae6c086b7cf4b6 Mon Sep 17 00:00:00 2001 From: Mannai <> Date: Wed, 10 Dec 2025 06:32:56 +0300 Subject: [PATCH 1/5] Add Markdown editor component and update translation models - Add dependency. - Update model and to include . - Update services (, ) to send payload to the backend. - Create reusable component in with write/preview tabs and a strict tag whitelist (p, strong, em, ul, ol, li). --- package.json | 1 + .../Common/forms/MarkdownEditor.tsx | 79 +++++++++++++++++++ .../Exercises/Detail/ExerciseDetailEdit.tsx | 6 +- .../Exercises/models/translation.ts | 19 +++-- src/services/exerciseTranslation.ts | 7 +- 5 files changed, 99 insertions(+), 13 deletions(-) create mode 100644 src/components/Common/forms/MarkdownEditor.tsx diff --git a/package.json b/package.json index 8c2e47a02..e9b2fb0be 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "react-grid-layout": "^1.5.2", "react-i18next": "^16.3.3", "react-is": "^19.2.0", + "react-markdown": "^10.1.0", "react-responsive": "^10.0.1", "react-router-dom": "^7.9.4", "react-simple-wysiwyg": "^3.4.1", diff --git a/src/components/Common/forms/MarkdownEditor.tsx b/src/components/Common/forms/MarkdownEditor.tsx new file mode 100644 index 000000000..3faad3f61 --- /dev/null +++ b/src/components/Common/forms/MarkdownEditor.tsx @@ -0,0 +1,79 @@ +import React, { useState } from 'react'; +import ReactMarkdown from 'react-markdown'; +import { Box, Button, TextField, Typography, Paper } from '@mui/material'; +import EditIcon from '@mui/icons-material/Edit'; +import VisibilityIcon from '@mui/icons-material/Visibility'; + +interface MarkdownEditorProps { + value: string; + onChange: (value: string) => void; + label?: string; + error?: boolean; + helperText?: string | false; +} + +export const MarkdownEditor: React.FC = ({ + value, + onChange, + label = "Description", + error, + helperText +}) => { + const [isPreview, setIsPreview] = useState(false); + + // Allowed tags for wger + const allowedTags = ['p', 'strong', 'em', 'ul', 'ol', 'li', 'b', 'i']; + + return ( + + + {/* Tabs/Buttons */} + + + + + + + {isPreview ? ( + + {value ? ( + + {value} + + ) : ( + + Nothing to preview + + )} + + ) : ( + onChange(e.target.value)} + error={error} + helperText={helperText || "Supported: **Bold**, *Italic*, Lists."} + variant="outlined" + /> + )} + + ); +}; \ No newline at end of file diff --git a/src/components/Exercises/Detail/ExerciseDetailEdit.tsx b/src/components/Exercises/Detail/ExerciseDetailEdit.tsx index 4d91ad2c7..48f122370 100644 --- a/src/components/Exercises/Detail/ExerciseDetailEdit.tsx +++ b/src/components/Exercises/Detail/ExerciseDetailEdit.tsx @@ -85,7 +85,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => { const isNewTranslation = language.id !== translationFromBase?.language; const exerciseTranslation = isNewTranslation - ? new Translation(null, null, '', '', language.id) + ? new Translation(null, null, '', '', language.id, [], [], [], '') : translationFromBase; const exerciseEnglish = exercise.getTranslation(); @@ -227,7 +227,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => { e.id)} /> + initial={exercise.equipment.map(e => e.id)} /> } @@ -302,7 +302,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => { {exercise.videos.map(video => ( + canDelete={deleteVideoPermissionQuery.data!} /> ))} diff --git a/src/components/Exercises/models/translation.ts b/src/components/Exercises/models/translation.ts index cf1b28994..52737cd4d 100644 --- a/src/components/Exercises/models/translation.ts +++ b/src/components/Exercises/models/translation.ts @@ -12,13 +12,14 @@ export class Translation { authors: string[] = []; constructor(public id: number | null, - public uuid: string | null, - public name: string, - public description: string, - public language: number, - notes?: Note[], - aliases?: Alias[], - authors?: string[] + public uuid: string | null, + public name: string, + public description: string, + public language: number, + notes?: Note[], + aliases?: Alias[], + authors?: string[], + public descriptionSource?: string ) { if (notes) { this.notes = notes; @@ -62,7 +63,8 @@ export class TranslationAdapter implements Adapter { item.notes?.map((e: any) => (new NoteAdapter().fromJson(e))), // eslint-disable-next-line @typescript-eslint/no-explicit-any item.aliases?.map((e: any) => (new AliasAdapter().fromJson(e))), - item.author_history + item.author_history, + item.description_source ); } @@ -78,6 +80,7 @@ export class TranslationAdapter implements Adapter { name: item.name, description: item.description, language: item.language, + description_source: item.descriptionSource, }; } } \ No newline at end of file diff --git a/src/services/exerciseTranslation.ts b/src/services/exerciseTranslation.ts index d90ee41a7..c9a4e99ee 100644 --- a/src/services/exerciseTranslation.ts +++ b/src/services/exerciseTranslation.ts @@ -63,10 +63,11 @@ export interface AddTranslationParams { name: string; description: string; author: string; + descriptionSource?: string; } export const addTranslation = async (params: AddTranslationParams): Promise => { - const { exerciseId, languageId, name, description, author } = params; + const { exerciseId, languageId, name, description, author, descriptionSource } = params; const url = makeUrl(EXERCISE_TRANSLATION_PATH); const baseData = { @@ -74,6 +75,7 @@ export const addTranslation = async (params: AddTranslationParams): Promise => { - const { id, exerciseId, languageId, name, description } = data; + const { id, exerciseId, languageId, name, description, descriptionSource } = data; const url = makeUrl(EXERCISE_TRANSLATION_PATH, { id: id }); const baseData = { @@ -101,6 +103,7 @@ export const editTranslation = async (data: EditTranslationParams): Promise Date: Wed, 10 Dec 2025 07:05:30 +0300 Subject: [PATCH 2/5] Integrate Markdown editor into Exercise Edit view - Replace the standard text area in with the new . - Update Formik logic to bind to for the API payload. - Implement fallback logic to display legacy HTML description if no Markdown source exists. - Remove form component usage in the edit view. --- .../Common/forms/MarkdownEditor.test.tsx | 53 ++++ .../Exercises/Add/Step3Description.tsx | 70 +++--- .../Exercises/Detail/ExerciseDetailEdit.tsx | 235 ++++++++---------- 3 files changed, 201 insertions(+), 157 deletions(-) create mode 100644 src/components/Common/forms/MarkdownEditor.test.tsx diff --git a/src/components/Common/forms/MarkdownEditor.test.tsx b/src/components/Common/forms/MarkdownEditor.test.tsx new file mode 100644 index 000000000..06e4ef171 --- /dev/null +++ b/src/components/Common/forms/MarkdownEditor.test.tsx @@ -0,0 +1,53 @@ +import { render, screen, fireEvent } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { MarkdownEditor } from './MarkdownEditor'; +import { I18nextProvider } from 'react-i18next'; +import i18n from '../../../i18n'; // Assuming standard i18n setup + +describe('MarkdownEditor', () => { + const mockOnChange = jest.fn(); + + it('renders in write mode by default with correct label', () => { + render( + + ); + + // Should find the Write button and the textarea + expect(screen.getByText('Write')).toHaveAttribute('aria-current', 'true'); + expect(screen.getByRole('textbox', { name: /exercise instructions/i })).toHaveValue('Test value'); + }); + + it('toggles to preview mode and displays content', () => { + render( + + ); + + // Switch to Preview + fireEvent.click(screen.getByText('Preview')); + + // Check if the bold text is rendered (ReactMarkdown uses ) + expect(screen.getByText('bold', { selector: 'strong' })).toBeInTheDocument(); + + // Should NOT render disallowed tags like headings + const markdownInput = '# Heading\n\nSimple text'; + render( + + ); + fireEvent.click(screen.getByText('Preview')); + expect(screen.queryByRole('heading')).toBeNull(); // Assert H1 is not rendered + }); + + it('calls onChange handler on input change', () => { + render( + + ); + + const textarea = screen.getByRole('textbox'); + fireEvent.change(textarea, { target: { value: 'New text' } }); + + expect(mockOnChange).toHaveBeenCalledWith('New text'); + }); +}); + +// To run this test: +// npm test -- MarkdownEditor \ No newline at end of file diff --git a/src/components/Exercises/Add/Step3Description.tsx b/src/components/Exercises/Add/Step3Description.tsx index bbcab4451..596aadd96 100644 --- a/src/components/Exercises/Add/Step3Description.tsx +++ b/src/components/Exercises/Add/Step3Description.tsx @@ -3,11 +3,10 @@ import Grid from '@mui/material/Grid'; import { useLanguageCheckQuery } from "components/Core/queries"; import { StepProps } from "components/Exercises/Add/AddExerciseStepper"; import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails"; -import { ExerciseDescription } from "components/Exercises/forms/ExerciseDescription"; +import { MarkdownEditor } from "components/Common/forms/MarkdownEditor"; import { ExerciseNotes } from "components/Exercises/forms/ExerciseNotes"; import { descriptionValidator, noteValidator } from "components/Exercises/forms/yupValidators"; import { Form, Formik } from "formik"; -import React from "react"; import { useTranslation } from "react-i18next"; import { useExerciseSubmissionStateValue } from "state"; import { setDescriptionEn, setNotesEn } from "state/exerciseSubmissionReducer"; @@ -59,38 +58,47 @@ export const Step3Description = ({ onContinue, onBack }: StepProps) => { }} > -
- - + {({ values, errors, touched, setFieldValue }) => ( + + + {/* REPLACED ExerciseDescription with MarkdownEditor */} + setFieldValue('description', val)} + error={touched.description && Boolean(errors.description)} + helperText={touched.description && errors.description} + /> - + - + - - - -
- - -
- + + + +
+ + +
+ + - - - +
+ + )} ) ); -}; +}; \ No newline at end of file diff --git a/src/components/Exercises/Detail/ExerciseDetailEdit.tsx b/src/components/Exercises/Detail/ExerciseDetailEdit.tsx index 48f122370..527d592f1 100644 --- a/src/components/Exercises/Detail/ExerciseDetailEdit.tsx +++ b/src/components/Exercises/Detail/ExerciseDetailEdit.tsx @@ -6,7 +6,7 @@ import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails"; import { EditExerciseCategory } from "components/Exercises/forms/Category"; import { EditExerciseEquipment } from "components/Exercises/forms/Equipment"; import { ExerciseAliases } from "components/Exercises/forms/ExerciseAliases"; -import { ExerciseDescription } from "components/Exercises/forms/ExerciseDescription"; +import { MarkdownEditor } from "components/Common/forms/MarkdownEditor"; import { ExerciseName } from "components/Exercises/forms/ExerciseName"; import { AddImageCard, ImageEditCard } from "components/Exercises/forms/ImageCard"; import { EditExerciseMuscle } from "components/Exercises/forms/Muscle"; @@ -85,7 +85,7 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => { const isNewTranslation = language.id !== translationFromBase?.language; const exerciseTranslation = isNewTranslation - ? new Translation(null, null, '', '', language.id, [], [], [], '') + ? new Translation(null, null, '', '', language.id, [], [], [], undefined) : translationFromBase; const exerciseEnglish = exercise.getTranslation(); @@ -100,29 +100,26 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => { initialValues={{ name: exerciseTranslation.name, alternativeNames: exerciseTranslation.aliases.map(a => ({ id: a.id, alias: a.alias })), - description: exerciseTranslation.description, + // Fallback: Use Source if available, else HTML (legacy), else empty + description: exerciseTranslation.descriptionSource || exerciseTranslation.description || '', }} enableReinitialize validationSchema={validationSchema} onSubmit={async values => { // Exercise translation + const payload = { + exerciseId: exercise.id!, + languageId: language.id, + name: values.name, + description: '', + descriptionSource: values.description, + author: '' + }; + const translation = exerciseTranslation.id - ? await editTranslationQuery.mutateAsync({ - id: exerciseTranslation.id, - exerciseId: exercise.id!, - languageId: language.id, - name: values.name, - description: values.description, - author: '' - }) - : await addTranslationQuery.mutateAsync({ - exerciseId: exercise.id!, - languageId: language.id, - name: values.name, - description: values.description, - author: profileQuery.data!.username - }); + ? await editTranslationQuery.mutateAsync({ ...payload, id: exerciseTranslation.id }) + : await addTranslationQuery.mutateAsync({ ...payload, author: profileQuery.data!.username }); // Alias handling const aliasOrig = (exerciseTranslation.aliases).map(a => ({ id: a.id, alias: a.alias })); @@ -147,127 +144,113 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => { setAlertIsVisible(true); }} > -
- - {alertIsVisible && + {({ values, touched, errors, setFieldValue }) => ( + + + {alertIsVisible && + + { + setAlertIsVisible(false); + }} + > + + + } + > + {t('exercises.successfullyUpdated')} + + + } + + + {t('translation')} + + + {t('English')} + + + + {language.nameLong} ({language.nameShort}) + + - { - setAlertIsVisible(false); - }} - > - - - } - > - {t('exercises.successfullyUpdated')} - - } - - - {t('translation')} - - - {t('English')} - - - - {language.nameLong} ({language.nameShort}) - - - - - {t('name')} - - - {exerciseEnglish.name} -
    - {exerciseEnglish.aliases.map((alias) => ( -
  • {alias.alias}
    • - ))} -
- - - - - - - - - - - - - - {t('exercises.description')} - - -
- - - - - - {editExercisePermissionQuery.data && <> + {t('name')} + + + {exerciseEnglish.name} +
    + {exerciseEnglish.aliases.map((alias) => ( +
  • {alias.alias}
    • + ))} +
+ + + + + + + + + - {t('nutrition.others')} + {t('exercises.description')} - + {/* English/Base Description (Read Only) */} + English Description (Reference) +
- e.id)} /> + {/* Markdown Editor */} + setFieldValue('description', val)} + error={touched.description && Boolean(errors.description)} + helperText={touched.description && errors.description} + /> - } - - {/* - - - - - {t('exercises.notes')} - - -
    - {exerciseEnglish.notes.map((note: Note) => ( -
  • {note.note}
    • - ))} -
- - -
    - {exerciseTranslation.notes.map((note: Note) => ( -
  • {note.note}
    • - ))} -
- - */} + {editExercisePermissionQuery.data && <> + + + + + {t('nutrition.others')} + + + + + + e.id)} /> + + } - - - + + + + - - + + )} {/* Images */} @@ -353,4 +336,4 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => { } ; -}; +}; \ No newline at end of file From 755dd5c454d20214cde8ba6947ad2bfe9eeb9c91 Mon Sep 17 00:00:00 2001 From: Mannai <> Date: Wed, 10 Dec 2025 08:00:01 +0300 Subject: [PATCH 3/5] Resolve ESM/Jest conflicts by switching to markdown-to-jsx; finalize UI integration - Address persistent Jest by switching from the problematic library to the CJS-compatible . - Implement component overrides in to strictly block disallowed tags (H1-H6, links) and enforce the required basic formatting whitelist (p, strong, ul, ol, li). - Fix minor test logic error in to ensure accurate assertion of the new component's behavior. --- package.json | 5 ++++- src/components/Exercises/models/translation.test.ts | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e9b2fb0be..497d5b0d7 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,10 @@ ], "setupFilesAfterEnv": [ "./src/setupTests.ts" + ], + "transformIgnorePatterns": [ + "/node_modules/(?!(react-markdown|vfile|vfile-message|unist-util-is|unist-util-select|unist-util-visit|unist-util-visit-parents|mdast-util-from-markdown|micromark|etc.))" ] }, "packageManager": "npm@10.5.0" -} +} \ No newline at end of file diff --git a/src/components/Exercises/models/translation.test.ts b/src/components/Exercises/models/translation.test.ts index f44540831..f79f6d062 100644 --- a/src/components/Exercises/models/translation.test.ts +++ b/src/components/Exercises/models/translation.test.ts @@ -33,6 +33,7 @@ describe("Exercise translation model tests", () => { language: 1, notes: [], aliases: [], + description_source: undefined, // eslint-disable-next-line camelcase author_history: ['author1', 'author2', 'author3'] })).toStrictEqual(e1); @@ -48,6 +49,7 @@ describe("Exercise translation model tests", () => { name: "a very long name that should be truncated", description: "description", language: 1, + description_source: undefined, }); }); From 515f6a5756a27859e791701981705c2b4b09914b Mon Sep 17 00:00:00 2001 From: Mannai <> Date: Wed, 10 Dec 2025 13:24:19 +0300 Subject: [PATCH 4/5] Complete Markdown migration: switch to and stabilize tests - Replaced with to resolve persistent Jest/CJS SyntaxErrors - Implemented strict element stripping in MarkdownEditor: allowed only simple tags and the rest (h1-h6, a, img) are now rendered as plain text & spans. - Resolved errors in and . - Updated to align with the backend schema. - Increased Jest global timeout to 15s in package.json to try to limit flaky timeouts when testing. --- package.json | 12 +-- .../Common/forms/MarkdownEditor.test.tsx | 97 +++++++++++------- .../Common/forms/MarkdownEditor.tsx | 98 +++++++++++++------ .../Exercises/Add/Step3Description.tsx | 3 +- .../Detail/ExerciseDetailEdit.test.tsx | 3 +- .../Exercises/Detail/ExerciseDetailEdit.tsx | 3 +- 6 files changed, 140 insertions(+), 76 deletions(-) diff --git a/package.json b/package.json index 497d5b0d7..bc6872fdc 100644 --- a/package.json +++ b/package.json @@ -37,12 +37,12 @@ "i18next-browser-languagedetector": "^8.2.0", "i18next-http-backend": "^3.0.2", "luxon": "^3.7.2", + "markdown-to-jsx": "^9.3.3", "react": "^19.2.0", "react-dom": "^19.2.0", "react-grid-layout": "^1.5.2", "react-i18next": "^16.3.3", "react-is": "^19.2.0", - "react-markdown": "^10.1.0", "react-responsive": "^10.0.1", "react-router-dom": "^7.9.4", "react-simple-wysiwyg": "^3.4.1", @@ -91,8 +91,8 @@ "start": "vite", "build": "vite build", "serve": "vite preview", - "test": "LANG=de_de jest", - "test:coverage": "LANG=de_de jest --coverage --collectCoverageFrom='!src/pages/**/*.tsx'", + "test": "LANG=de_de jest --testTimeout=15000", + "test:coverage": "LANG=de_de jest --coverage --collectCoverageFrom='!src/pages/**/*.tsx' --testTimeout=15000", "i18n": "i18next", "lint": "eslint src", "lint:quiet": "eslint --quiet src", @@ -114,7 +114,8 @@ "moduleNameMapper": { "^axios$": "/node_modules/axios/dist/node/axios.cjs", "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", - "\\.(css|less)$": "/__mocks__/styleMock.js" + "\\.(css|less)$": "/__mocks__/styleMock.js", + "^react-markdown$": "/__mocks__/react-markdown.js" }, "preset": "ts-jest", "testEnvironment": "jest-environment-jsdom", @@ -123,9 +124,6 @@ ], "setupFilesAfterEnv": [ "./src/setupTests.ts" - ], - "transformIgnorePatterns": [ - "/node_modules/(?!(react-markdown|vfile|vfile-message|unist-util-is|unist-util-select|unist-util-visit|unist-util-visit-parents|mdast-util-from-markdown|micromark|etc.))" ] }, "packageManager": "npm@10.5.0" diff --git a/src/components/Common/forms/MarkdownEditor.test.tsx b/src/components/Common/forms/MarkdownEditor.test.tsx index 06e4ef171..ae5110e3f 100644 --- a/src/components/Common/forms/MarkdownEditor.test.tsx +++ b/src/components/Common/forms/MarkdownEditor.test.tsx @@ -1,53 +1,84 @@ +import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; -import '@testing-library/jest-dom'; import { MarkdownEditor } from './MarkdownEditor'; -import { I18nextProvider } from 'react-i18next'; -import i18n from '../../../i18n'; // Assuming standard i18n setup +import '@testing-library/jest-dom'; describe('MarkdownEditor', () => { - const mockOnChange = jest.fn(); + const mockChange = jest.fn(); - it('renders in write mode by default with correct label', () => { - render( - - ); + it('renders in Write mode by default', () => { + render(); + // Check for the textarea + expect(screen.getByRole('textbox')).toBeInTheDocument(); + // Check content exists inside textbox + expect(screen.getByDisplayValue('Test content')).toBeInTheDocument(); + }); - // Should find the Write button and the textarea - expect(screen.getByText('Write')).toHaveAttribute('aria-current', 'true'); - expect(screen.getByRole('textbox', { name: /exercise instructions/i })).toHaveValue('Test value'); + it('calls onChange when typing', () => { + render(); + const input = screen.getByRole('textbox'); + fireEvent.change(input, { target: { value: 'New text' } }); + expect(mockChange).toHaveBeenCalledWith('New text'); }); - it('toggles to preview mode and displays content', () => { - render( - - ); + it('toggles to preview mode and renders basic formatting', () => { + const markdown = "This is **bold** and *italic*"; + render(); // Switch to Preview fireEvent.click(screen.getByText('Preview')); - // Check if the bold text is rendered (ReactMarkdown uses ) - expect(screen.getByText('bold', { selector: 'strong' })).toBeInTheDocument(); + // Check that bold and italic tags are rendered + // Note: markdown-to-jsx might use or , check your overrides. + // We overrode 'strong' to 'strong', so we look for that. + const boldElement = screen.getByText('bold'); + expect(boldElement.tagName).toBe('STRONG'); + + const italicElement = screen.getByText('italic'); + expect(italicElement.tagName).toBe('EM'); + }); + + it('blocks Heading tags (h1-h6) and renders them as plain text/paragraphs', () => { + // We provide a # Heading. + // Expected result: Text "Forbidden Heading" is visible, but NOT inside an

tag. + render(); - // Should NOT render disallowed tags like headings - const markdownInput = '# Heading\n\nSimple text'; - render( - - ); fireEvent.click(screen.getByText('Preview')); - expect(screen.queryByRole('heading')).toBeNull(); // Assert H1 is not rendered + + // 1. The text should still be readable + expect(screen.getByText('Forbidden Heading')).toBeInTheDocument(); + + // 2. But there should be NO heading role in the document + const heading = screen.queryByRole('heading', { level: 1 }); + expect(heading).toBeNull(); }); - it('calls onChange handler on input change', () => { - render( - - ); + it('blocks Link tags (a) and renders plain text', () => { + const markdown = "[Malicious Link](http://evil.com)"; + render(); - const textarea = screen.getByRole('textbox'); - fireEvent.change(textarea, { target: { value: 'New text' } }); + fireEvent.click(screen.getByText('Preview')); + + // 1. The text anchor should be visible + expect(screen.getByText('Malicious Link')).toBeInTheDocument(); - expect(mockOnChange).toHaveBeenCalledWith('New text'); + // 2. But it should NOT be a link (no anchor tag) + const link = screen.queryByRole('link'); + expect(link).toBeNull(); + + // 3. Ensure the href is not present in the DOM (security check) + const textElement = screen.getByText('Malicious Link'); + expect(textElement).not.toHaveAttribute('href'); }); -}); -// To run this test: -// npm test -- MarkdownEditor \ No newline at end of file + it('blocks Images', () => { + // Image syntax: ![alt text](url) + render(); + + fireEvent.click(screen.getByText('Preview')); + + // Ensure the image tag is not rendered + const img = screen.queryByRole('img'); + expect(img).toBeNull(); + }); +}); \ No newline at end of file diff --git a/src/components/Common/forms/MarkdownEditor.tsx b/src/components/Common/forms/MarkdownEditor.tsx index 3faad3f61..3e69b7bd6 100644 --- a/src/components/Common/forms/MarkdownEditor.tsx +++ b/src/components/Common/forms/MarkdownEditor.tsx @@ -1,15 +1,53 @@ import React, { useState } from 'react'; -import ReactMarkdown from 'react-markdown'; -import { Box, Button, TextField, Typography, Paper } from '@mui/material'; -import EditIcon from '@mui/icons-material/Edit'; -import VisibilityIcon from '@mui/icons-material/Visibility'; +import Markdown, { MarkdownToJSX } from 'markdown-to-jsx'; +import { Box, Button, TextField, Typography, Paper, ButtonGroup } from '@mui/material'; + +const StripElement = ({ children }: { children: React.ReactNode }) => {children}; + +const StripBlock = ({ children }: { children: React.ReactNode }) => ( + + {children} + +); + +const MarkdownOptions: MarkdownToJSX.Options = { + overrides: { + p: { + component: Typography, + props: { variant: 'body1', sx: { mb: 1.5 } } + }, + + // Allowed inline/list tags + strong: { component: 'strong' }, + b: { component: 'b' }, + em: { component: 'em' }, + i: { component: 'i' }, + ul: { component: 'ul', props: { style: { paddingLeft: '20px', margin: '0 0 16px 0' } } }, + ol: { component: 'ol', props: { style: { paddingLeft: '20px', margin: '0 0 16px 0' } } }, li: { component: 'li' }, + + // Block links and headings by mapping them to plan spans. + a: { component: StripElement }, + + // --- BLOCKED TAGS (No headings allowed) --- + h1: { component: StripBlock }, + h2: { component: StripBlock }, + h3: { component: StripBlock }, + h4: { component: StripBlock }, + h5: { component: StripBlock }, + h6: { component: StripBlock }, // Tables, images, etc. are naturally ignored by markdown-to-jsx if not explicitly defined + + img: { component: () => null }, + + table: { component: 'div' }, + }, +}; interface MarkdownEditorProps { value: string; onChange: (value: string) => void; label?: string; error?: boolean; - helperText?: string | false; + helperText?: string; } export const MarkdownEditor: React.FC = ({ @@ -21,57 +59,53 @@ export const MarkdownEditor: React.FC = ({ }) => { const [isPreview, setIsPreview] = useState(false); - // Allowed tags for wger - const allowedTags = ['p', 'strong', 'em', 'ul', 'ol', 'li', 'b', 'i']; - return ( - {/* Tabs/Buttons */} - + + {label} + + - + {isPreview ? ( - - {value ? ( - - {value} - - ) : ( - - Nothing to preview - - )} + + {/* The library handles the parsing based on our secure options */} + + {value || '*No content*'} + ) : ( onChange(e.target.value)} error={error} - helperText={helperText || "Supported: **Bold**, *Italic*, Lists."} - variant="outlined" + helperText={helperText} + placeholder="Use Markdown: *italic*, **bold**, - list" /> )} diff --git a/src/components/Exercises/Add/Step3Description.tsx b/src/components/Exercises/Add/Step3Description.tsx index 596aadd96..46761aec0 100644 --- a/src/components/Exercises/Add/Step3Description.tsx +++ b/src/components/Exercises/Add/Step3Description.tsx @@ -61,13 +61,12 @@ export const Step3Description = ({ onContinue, onBack }: StepProps) => { {({ values, errors, touched, setFieldValue }) => (
- {/* REPLACED ExerciseDescription with MarkdownEditor */} setFieldValue('description', val)} error={touched.description && Boolean(errors.description)} - helperText={touched.description && errors.description} + helperText={touched.description ? errors.description : undefined} /> diff --git a/src/components/Exercises/Detail/ExerciseDetailEdit.test.tsx b/src/components/Exercises/Detail/ExerciseDetailEdit.test.tsx index 829c5ed34..9f6d74d9c 100644 --- a/src/components/Exercises/Detail/ExerciseDetailEdit.test.tsx +++ b/src/components/Exercises/Detail/ExerciseDetailEdit.test.tsx @@ -149,7 +149,8 @@ describe("Exercise translation edit tests", () => { id: 9, languageId: 1, author: "", - description: "Die Kniebeuge ist eine Übung zur Kräftigung der Oberschenkelmuskulatur", + description: "", + descriptionSource: "Die Kniebeuge ist eine Übung zur Kräftigung der Oberschenkelmuskulatur", name: "Mangalitza" }); }); diff --git a/src/components/Exercises/Detail/ExerciseDetailEdit.tsx b/src/components/Exercises/Detail/ExerciseDetailEdit.tsx index 527d592f1..4be7d5572 100644 --- a/src/components/Exercises/Detail/ExerciseDetailEdit.tsx +++ b/src/components/Exercises/Detail/ExerciseDetailEdit.tsx @@ -217,7 +217,8 @@ export const ExerciseDetailEdit = ({ exerciseId, language }: ViewProps) => { value={values.description} onChange={(val) => setFieldValue('description', val)} error={touched.description && Boolean(errors.description)} - helperText={touched.description && errors.description} + // FIXED: Use ternary to ensure we return undefined instead of false + helperText={touched.description ? errors.description : undefined} /> From 19f7720dc5648620258e36a18165d6d472a7ee35 Mon Sep 17 00:00:00 2001 From: Roland Geider Date: Sun, 8 Feb 2026 22:00:49 +0100 Subject: [PATCH 5/5] Cleanup, use i18n and remove unused dependency --- package-lock.json | 39 ++++++++--- package.json | 1 - public/locales/en/translation.json | 2 + .../Common/forms/MarkdownEditor.tsx | 64 ++++--------------- .../Exercises/Add/Step4Translations.tsx | 10 ++- .../Exercises/Add/Step6Overview.tsx | 14 +++- .../Exercises/forms/ExerciseDescription.tsx | 57 ----------------- src/services/exercise.ts | 14 ++-- src/utils/markdown.tsx | 51 +++++++++++++++ 9 files changed, 121 insertions(+), 131 deletions(-) delete mode 100644 src/components/Exercises/forms/ExerciseDescription.tsx create mode 100644 src/utils/markdown.tsx diff --git a/package-lock.json b/package-lock.json index e354c78da..f567f49b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "i18next-browser-languagedetector": "^8.2.0", "i18next-http-backend": "^3.0.2", "luxon": "^3.7.2", + "markdown-to-jsx": "^9.3.3", "react": "^19.2.0", "react-dom": "^19.2.0", "react-grid-layout": "^1.5.2", @@ -34,7 +35,6 @@ "react-is": "^19.2.0", "react-responsive": "^10.0.1", "react-router-dom": "^7.9.4", - "react-simple-wysiwyg": "^3.4.1", "react-slick": "^0.31.0", "recharts": "^3.4.1", "slick-carousel": "^1.8.1", @@ -9437,6 +9437,34 @@ "tmpl": "1.0.5" } }, + "node_modules/markdown-to-jsx": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-9.7.3.tgz", + "integrity": "sha512-F+1BmeeUKNM7K2eDDaAOyrs1iusNNKbt3YyxYP2Al1Dr1op6hpk3/6wukArwPWh9d9O0C2ybiCTXc6L5CwKIHQ==", + "license": "MIT", + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "react": ">= 16.0.0", + "solid-js": ">=1.0.0", + "vue": ">=3.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-native": { + "optional": true + }, + "solid-js": { + "optional": true + }, + "vue": { + "optional": true + } + } + }, "node_modules/matcher-collection": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-2.0.1.tgz", @@ -10683,15 +10711,6 @@ "react-dom": ">=18" } }, - "node_modules/react-simple-wysiwyg": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/react-simple-wysiwyg/-/react-simple-wysiwyg-3.4.1.tgz", - "integrity": "sha512-amppNS/WiUSURSFXg9evcRjRBwK6pf5LRWDACVZT/q4k2TginjNxegxM0T2s2LYulbRFS4eGwO7nv57OskckHw==", - "license": "MIT", - "peerDependencies": { - "react": ">=16.8" - } - }, "node_modules/react-slick": { "version": "0.31.0", "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.31.0.tgz", diff --git a/package.json b/package.json index 626c59961..d9530640d 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "react-is": "^19.2.0", "react-responsive": "^10.0.1", "react-router-dom": "^7.9.4", - "react-simple-wysiwyg": "^3.4.1", "react-slick": "^0.31.0", "recharts": "^3.4.1", "slick-carousel": "^1.8.1", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index db3905428..6447d8c08 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -15,12 +15,14 @@ "timeOfDay": "Time of day", "submit": "Submit", "edit": "Edit", + "preview": "Preview", "editName": "Edit {{name}}", "delete": "Delete", "deleteConfirmation": "Are you sure you want to delete \"{{name}}\"?", "add": "Add", "close": "Close", "difference": "Difference", + "useMarkdownHint": "You can use basic Markdown to format the text: *italic*, **bold**, - list", "days": "Days", "all": "All", "lastYear": "Last Year", diff --git a/src/components/Common/forms/MarkdownEditor.tsx b/src/components/Common/forms/MarkdownEditor.tsx index 3e69b7bd6..e2a4e9318 100644 --- a/src/components/Common/forms/MarkdownEditor.tsx +++ b/src/components/Common/forms/MarkdownEditor.tsx @@ -1,46 +1,9 @@ +import { Box, Button, ButtonGroup, Paper, TextField, Typography } from '@mui/material'; +import Markdown from 'markdown-to-jsx'; import React, { useState } from 'react'; -import Markdown, { MarkdownToJSX } from 'markdown-to-jsx'; -import { Box, Button, TextField, Typography, Paper, ButtonGroup } from '@mui/material'; +import { useTranslation } from "react-i18next"; +import { MarkdownOptions } from "utils/markdown"; -const StripElement = ({ children }: { children: React.ReactNode }) => {children}; - -const StripBlock = ({ children }: { children: React.ReactNode }) => ( - - {children} - -); - -const MarkdownOptions: MarkdownToJSX.Options = { - overrides: { - p: { - component: Typography, - props: { variant: 'body1', sx: { mb: 1.5 } } - }, - - // Allowed inline/list tags - strong: { component: 'strong' }, - b: { component: 'b' }, - em: { component: 'em' }, - i: { component: 'i' }, - ul: { component: 'ul', props: { style: { paddingLeft: '20px', margin: '0 0 16px 0' } } }, - ol: { component: 'ol', props: { style: { paddingLeft: '20px', margin: '0 0 16px 0' } } }, li: { component: 'li' }, - - // Block links and headings by mapping them to plan spans. - a: { component: StripElement }, - - // --- BLOCKED TAGS (No headings allowed) --- - h1: { component: StripBlock }, - h2: { component: StripBlock }, - h3: { component: StripBlock }, - h4: { component: StripBlock }, - h5: { component: StripBlock }, - h6: { component: StripBlock }, // Tables, images, etc. are naturally ignored by markdown-to-jsx if not explicitly defined - - img: { component: () => null }, - - table: { component: 'div' }, - }, -}; interface MarkdownEditorProps { value: string; @@ -51,13 +14,14 @@ interface MarkdownEditorProps { } export const MarkdownEditor: React.FC = ({ - value, - onChange, - label = "Description", - error, - helperText -}) => { + value, + onChange, + label = "Description", + error, + helperText + }) => { const [isPreview, setIsPreview] = useState(false); + const [t] = useTranslation(); return ( @@ -70,13 +34,13 @@ export const MarkdownEditor: React.FC = ({ variant={!isPreview ? 'contained' : 'outlined'} onClick={() => setIsPreview(false)} > - Write + {t('edit')} @@ -105,7 +69,7 @@ export const MarkdownEditor: React.FC = ({ onChange={(e) => onChange(e.target.value)} error={error} helperText={helperText} - placeholder="Use Markdown: *italic*, **bold**, - list" + placeholder={t('useMarkdownHint')} /> )} diff --git a/src/components/Exercises/Add/Step4Translations.tsx b/src/components/Exercises/Add/Step4Translations.tsx index 02d518d6d..06b57b71e 100644 --- a/src/components/Exercises/Add/Step4Translations.tsx +++ b/src/components/Exercises/Add/Step4Translations.tsx @@ -11,12 +11,12 @@ import { Switch } from "@mui/material"; import Grid from '@mui/material/Grid'; +import { MarkdownEditor } from "components/Common/forms/MarkdownEditor"; import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget"; import { useLanguageCheckQuery } from "components/Core/queries"; import { StepProps } from "components/Exercises/Add/AddExerciseStepper"; import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails"; import { ExerciseAliases } from "components/Exercises/forms/ExerciseAliases"; -import { ExerciseDescription } from "components/Exercises/forms/ExerciseDescription"; import { ExerciseName } from "components/Exercises/forms/ExerciseName"; import { ExerciseNotes } from "components/Exercises/forms/ExerciseNotes"; import { @@ -147,7 +147,13 @@ export const Step4Translations = ({ onContinue, onBack }: StepProps) => { - + formik.setFieldValue('description', val)} + error={formik.touched.description && Boolean(formik.errors.description)} + helperText={formik.touched.description ? formik.errors.description : undefined} + /> diff --git a/src/components/Exercises/Add/Step6Overview.tsx b/src/components/Exercises/Add/Step6Overview.tsx index 3a3fa455c..e4e5897a4 100644 --- a/src/components/Exercises/Add/Step6Overview.tsx +++ b/src/components/Exercises/Add/Step6Overview.tsx @@ -25,12 +25,14 @@ import { useMusclesQuery } from "components/Exercises/queries"; import { useProfileQuery } from "components/User/queries/profile"; +import Markdown from 'markdown-to-jsx'; import React from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { postExerciseImage } from "services"; import { useExerciseSubmissionStateValue } from "state"; import { ENGLISH_LANGUAGE_ID } from "utils/consts"; +import { MarkdownOptions } from "utils/markdown"; import { makeLink, WgerLink } from "utils/url"; export const Step6Overview = ({ onBack }: StepProps) => { @@ -123,7 +125,11 @@ export const Step6Overview = ({ onBack }: StepProps) => { {t('description')} - {state.descriptionEn} + + + {state.descriptionEn} + + {t('exercises.notes')} @@ -193,7 +199,11 @@ export const Step6Overview = ({ onBack }: StepProps) => { {t('description')} - {state.descriptionI18n} + + + {state.descriptionI18n} + + diff --git a/src/components/Exercises/forms/ExerciseDescription.tsx b/src/components/Exercises/forms/ExerciseDescription.tsx deleted file mode 100644 index f528e8047..000000000 --- a/src/components/Exercises/forms/ExerciseDescription.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; -import { useField } from "formik"; -import { FormHelperText } from "@mui/material"; -import { - BtnBold, - BtnBulletList, - BtnItalic, - BtnNumberedList, - BtnRedo, - BtnUnderline, - BtnUndo, - Editor, - EditorProps, - EditorProvider, - Separator, - Toolbar, -} from "react-simple-wysiwyg"; - -export function ExerciseEditor(props: EditorProps) { - return ( - - - - - - - - - - - - - { /* */} - - - - ); -} - - -export function ExerciseDescription(props: { fieldName: string }) { - - const [field, meta, helpers] = useField(props.fieldName); - - return <> -
- helpers.setValue(newValue.target.value)} - /> -
- {meta.touched - && Boolean(meta.error) - && {meta.error} - } - ; -} \ No newline at end of file diff --git a/src/services/exercise.ts b/src/services/exercise.ts index 79b6bc12d..4086c2e2d 100644 --- a/src/services/exercise.ts +++ b/src/services/exercise.ts @@ -111,20 +111,16 @@ export const addFullExercise = async (data: AddExerciseFullProps): Promise ({ name: t.name, - description: t.description, + "description_source": t.description, language: t.language, - //eslint-disable-next-line camelcase - license_author: data.author ?? '', + "license_author": data.author ?? '', aliases: t.aliases ?? [], comments: t.comments ?? [] }) diff --git a/src/utils/markdown.tsx b/src/utils/markdown.tsx new file mode 100644 index 000000000..b7d24e61e --- /dev/null +++ b/src/utils/markdown.tsx @@ -0,0 +1,51 @@ +import { Typography } from '@mui/material'; + + +import { MarkdownToJSX } from 'markdown-to-jsx'; +import React from 'react'; + + +const StripElement = ({ children }: { children: React.ReactNode }) => {children}; + +const StripBlock = ({ children }: { children: React.ReactNode }) => ( + + {children} + +); + +/* + * Custom options for markdown-to-jsx to ensure that only allowed HTML tags are rendered + * (note that there's still server side filtering for this) + */ +export const MarkdownOptions: MarkdownToJSX.Options = { + overrides: { + p: { + component: Typography, + props: { variant: 'body1', sx: { mb: 1.5 } } + }, + + // Allowed inline/list tags + strong: { component: 'strong' }, + b: { component: 'b' }, + em: { component: 'em' }, + i: { component: 'i' }, + ul: { component: 'ul', props: { style: { paddingLeft: '20px', margin: '0 0 16px 0' } } }, + ol: { component: 'ol', props: { style: { paddingLeft: '20px', margin: '0 0 16px 0' } } }, + li: { component: 'li' }, + + // Block links and headings by mapping them to plan spans. + a: { component: StripElement }, + + // --- BLOCKED TAGS (No headings allowed) --- + h1: { component: StripBlock }, + h2: { component: StripBlock }, + h3: { component: StripBlock }, + h4: { component: StripBlock }, + h5: { component: StripBlock }, + h6: { component: StripBlock }, // Tables, images, etc. are naturally ignored by markdown-to-jsx if not explicitly defined + + img: { component: () => null }, + + table: { component: 'div' }, + }, +}; \ No newline at end of file