Feat/markdown editor (#1105)

* feat: create new MD Editor

* feat: remove eslint issue

* feat: add toolbar

* feat: add mock exports

* feat: migrate some file to typescript

* feat: update package lock

* feat: update package lock

* fix: solve unit test

package.json

@@ -74,6 +74,7 @@
 	},
 	"dependencies": {
 		"@tanstack/react-query": "^5.59.20",
+		"@uiw/react-md-editor": "^4.0.4",
 		"dayjs": "^1.11.6",
 		"dompurify": "2.5.6",
 		"draft-js": "0.11.7",

src/packages/components/rich-editor/react-md-editor.spec.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, vi, expect } from 'vitest';
+
+import { MDEditor } from './react-md-editor';
+
+vi.mock('@uiw/react-md-editor', () => {
+	return {
+		italic: undefined,
+		bold: undefined,
+		unorderedListCommand: undefined,
+		default: ({
+			value,
+			onChange,
+		}: {
+			value: string;
+			onChange: (value?: string) => void;
+		}) => (
+			<textarea
+				data-testid="editor"
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+			/>
+		),
+	};
+});
+
+describe('MDEditor component', () => {
+	it('should render the editor with the initial text', () => {
+		const mockHandleChange = vi.fn();
+		const initialText = 'Initial text';
+
+		render(<MDEditor text={initialText} handleChange={mockHandleChange} />);
+
+		const editor = screen.getByTestId('editor') as HTMLInputElement;
+		expect(editor).toBeInTheDocument();
+		expect(editor.value).toBe(initialText);
+	});
+
+	it('should call handleChange when the text is updated', async () => {
+		const mockHandleChange = vi.fn();
+		const initialText = '';
+		const newText = 'Updated text';
+
+		render(<MDEditor text={initialText} handleChange={mockHandleChange} />);
+
+		const editor = screen.getByTestId('editor');
+		await userEvent.clear(editor);
+		await userEvent.type(editor, newText);
+
+		expect(mockHandleChange).toHaveBeenCalledTimes(12);
+	});
+});

src/packages/components/rich-editor/react-md-editor.tsx

@@ -0,0 +1,19 @@
+import Editor, {
+	bold,
+	italic,
+	unorderedListCommand,
+} from '@uiw/react-md-editor';
+
+export const MDEditor = ({
+	text,
+	handleChange,
+}: Readonly<{ text: string; handleChange: (value?: string) => void }>) => {
+	return (
+		<Editor
+			value={text}
+			onChange={handleChange}
+			commands={[italic, bold, unorderedListCommand]}
+			preview="edit"
+		/>
+	);
+};

src/packages/modules-classifications/correspondences/association/home.spec.jsx → src/packages/modules-classifications/correspondences/association/home.spec.tsx

@@ -1,16 +1,11 @@
-import { locales } from '../../../tests-utils/default-values';
 import { renderWithAppContext } from '../../../tests-utils/render';
 import * as associationUtils from '../../utils/correspondence/association';
 import Home from './home';
 
 describe('association-home', () => {
 	it('renders without crashing', () => {
 		renderWithAppContext(
-			<Home
-				association={associationUtils.empty()}
-				secondLang={false}
-				langs={locales}
-			/>,
+			<Home association={associationUtils.empty()} secondLang={false} />,
 		);
 	});
 });

src/packages/modules-classifications/correspondences/visualization/home-general.spec.jsx → src/packages/modules-classifications/correspondences/visualization/home-general.spec.tsx

@@ -1,4 +1,3 @@
-import { locales } from '../../../tests-utils/default-values';
 import { renderWithAppContext } from '../../../tests-utils/render';
 import HomeGeneral from './home-general';
 
@@ -14,11 +13,7 @@ const correspondence = {
 describe('correspondence-home-general', () => {
 	it('renders without crashing', () => {
 		renderWithAppContext(
-			<HomeGeneral
-				correspondence={correspondence}
-				secondLang={true}
-				langs={locales}
-			/>,
+			<HomeGeneral correspondence={correspondence} secondLang={true} />,
 		);
 	});
 });

src/packages/modules-datasets/datasets/edit/validation.spec.tsx

@@ -1,14 +1,17 @@
+import { CatalogRecord } from '@model/Dataset';
+
 import { validate } from './validation';
 
+const catalogRecord = {
+	creator: 'creator',
+	contributor: ['contributor'],
+} as CatalogRecord;
 describe('validation', function () {
 	it('should return an error for labelLg1', function () {
 		expect(
 			validate({
 				labelLg2: 'labelLg2',
-				catalogRecord: {
-					creator: 'creator',
-					contributor: ['contributor'],
-				},
+				catalogRecord,
 				disseminationStatus: 'status',
 				wasGeneratedIRIs: ['id'],
 			}),
@@ -29,10 +32,7 @@ describe('validation', function () {
 		expect(
 			validate({
 				labelLg1: 'labelLg1',
-				catalogRecord: {
-					creator: 'creator',
-					contributor: ['contributor'],
-				},
+				catalogRecord,
 				disseminationStatus: 'status',
 				wasGeneratedIRIs: ['id'],
 			}),
@@ -55,6 +55,7 @@ describe('validation', function () {
 				labelLg1: 'labelLg2',
 				labelLg2: 'labelLg2',
 				contributor: [],
+				wasGeneratedIRIs: [],
 			}),
 		).toEqual({
 			errorMessage: [
@@ -81,10 +82,7 @@ describe('validation', function () {
 			validate({
 				labelLg1: 'labelLg2',
 				labelLg2: 'labelLg2',
-				catalogRecord: {
-					creator: 'creator',
-					contributor: ['contributor'],
-				},
+				catalogRecord,
 				disseminationStatus: 'status',
 				wasGeneratedIRIs: [],
 			}),
@@ -109,10 +107,7 @@ describe('validation', function () {
 			validate({
 				labelLg1: 'labelLg2',
 				labelLg2: 'labelLg2',
-				catalogRecord: {
-					creator: 'creator',
-					contributor: ['contributor'],
-				},
+				catalogRecord,
 				disseminationStatus: 'status',
 				wasGeneratedIRIs: ['id'],
 			}),

src/packages/modules-datasets/distributions/edit.jsx

@@ -17,7 +17,7 @@ import LabelRequired from '@components/label-required';
 import { Row } from '@components/layout';
 import { Loading, Saving } from '@components/loading';
 import { PageTitleBlock } from '@components/page-title-block';
-import { EditorMarkdown } from '@components/rich-editor/editor-markdown';
+import { MDEditor } from '@components/rich-editor/react-md-editor';
 
 import { DistributionApi } from '@sdk/index';
 
@@ -188,7 +188,7 @@ export const Component = () => {
 				<Row>
 					<div className="col-md-6 form-group">
 						<label htmlFor="descriptionLg1">{D1.descriptionTitle}</label>
-						<EditorMarkdown
+						<MDEditor
 							text={editingDistribution.descriptionLg1}
 							handleChange={(value) =>
 								setEditingDistribution({
@@ -200,7 +200,7 @@ export const Component = () => {
 					</div>
 					<div className="col-md-6 form-group">
 						<label htmlFor="descriptionLg2">{D2.descriptionTitle}</label>
-						<EditorMarkdown
+						<MDEditor
 							text={editingDistribution.descriptionLg2}
 							handleChange={(value) =>
 								setEditingDistribution({

src/packages/modules-operations/indicators/edition/validation.spec.tsx

@@ -43,6 +43,7 @@ describe('validation', function () {
 				prefLabelLg1: 'prefLabelLg1',
 				prefLabelLg2: 'prefLabelLg2',
 				wasGeneratedBy: [{ id: 'i', type: 'series' }],
+				creators: [],
 			}),
 		).toEqual({
 			errorMessage: ['The property <strong>Owners</strong> is required.'],

src/packages/modules-operations/series/edition/validation.spec.tsx

@@ -52,6 +52,7 @@ describe('validation', function () {
 				prefLabelLg2: '',
 				accrualPeriodicityCode: 'accrualPeriodicityCode',
 				typeCode: 'typeCode',
+				creators: [],
 			}),
 		).toEqual({
 			errorMessage: [