feat: Add markdown editor for description

package.json

@@ -25,6 +25,7 @@
     "@refinedev/supabase": "^5.9.8",
     "@supabase/supabase-js": "^2.50.3",
     "@tanstack/react-query": "^4.10.1",
+    "@uiw/react-md-editor": "^4.0.8",
     "antd": "^5.26.3",
     "dayjs": "^1.10.7",
     "i18next": "^25.3.1",
@@ -33,7 +34,9 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-i18next": "^15.6.0",
-    "react-router": "^7.6.3"
+    "react-markdown": "^10.1.0",
+    "react-router": "^7.6.3",
+    "rehype-sanitize": "^6.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.1.1",

src/equipments/components/equipment-form.tsx

@@ -4,6 +4,7 @@ import dayjs from 'dayjs';
 import type { FC } from 'react';
 
 import { BoatSystemSelect } from '@/boats/components/boat-system-select';
+import { MarkdownEditor } from '@/shared/components/markdown-editor';
 
 interface EquipmentFormProps {
   formProps: any;
@@ -58,7 +59,7 @@ const EquipmentForm: FC<EquipmentFormProps> = ({
         label={translate('equipments.form.labels.description')}
         name="description"
       >
-        <Input.TextArea rows={4} />
+        <MarkdownEditor />
       </Form.Item>
       <Form.Item
         label={translate('equipments.form.labels.warranty_end_date')}

src/equipments/pages/show.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router';
 
 import { useCurrentBoat } from '@/boats/hooks/use-current-boat';
 import { AttachmentList } from '@/shared/components/attachment-list';
+import { MarkdownRender } from '@/shared/components/markdown-render';
 import { PageHeader } from '@/shared/components/page-header';
 
 const ShowEquipment = () => {
@@ -36,10 +37,6 @@ const ShowEquipment = () => {
             : null}
           {equipment?.data.name}
         </Typography.Paragraph>
-        <Typography.Paragraph>
-          <strong>{translate('equipments.form.labels.description')}: </strong>
-          {equipment?.data.description}
-        </Typography.Paragraph>
         <Typography.Paragraph>
           <strong>{translate('equipments.form.labels.system')}: </strong>
           {translate(`boats.systems.list.${equipment?.data.system_key}.name`)}
@@ -104,6 +101,14 @@ const ShowEquipment = () => {
             {dayjs(equipment.data.warranty_end_date).format('DD/MM/YYYY')}
           </Typography.Paragraph>
         ) : null}
+        {equipment?.data.description ? (
+          <>
+            <Typography.Title level={5}>
+              {translate('equipments.form.labels.description')}:
+            </Typography.Title>
+            <MarkdownRender content={equipment?.data.description} />
+          </>
+        ) : null}
       </Card>
       <AttachmentList
         resource="equipment"

src/interventions/components/intervention-form.tsx

@@ -5,6 +5,8 @@ import dayjs from 'dayjs';
 import type { FC } from 'react';
 import { useState } from 'react';
 
+import { MarkdownEditor } from '@/shared/components/markdown-editor';
+
 interface InterventionFormProps {
   formProps: any;
   handleOnFinish: (values: any) => void;
@@ -48,7 +50,7 @@ const InterventionForm: FC<InterventionFormProps> = ({
         label={translate('interventions.form.labels.description')}
         name="description"
       >
-        <Input.TextArea />
+        <MarkdownEditor />
       </Form.Item>
 
       <Form.Item

src/interventions/pages/show.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router';
 
 import { useCurrentBoat } from '@/boats/hooks/use-current-boat';
 import { AttachmentList } from '@/shared/components/attachment-list';
+import { MarkdownRender } from '@/shared/components/markdown-render';
 import { PageHeader } from '@/shared/components/page-header';
 import { getCostCalculationString } from '../utils/cost';
 
@@ -37,14 +38,6 @@ const ShowIntervention = () => {
           <strong>{translate('interventions.form.labels.title')}: </strong>
           {intervention?.data.title}
         </Typography.Paragraph>
-        {intervention?.data.description ? (
-          <Typography.Paragraph>
-            <strong>
-              {translate('interventions.form.labels.description')}:
-            </strong>
-            {intervention.data.description}
-          </Typography.Paragraph>
-        ) : null}
         {intervention?.data.total_cost ? (
           <>
             <Typography.Paragraph style={{ marginBottom: 0 }}>
@@ -61,6 +54,14 @@ const ShowIntervention = () => {
             </Typography.Paragraph>
           </>
         ) : null}
+        {intervention?.data.description ? (
+          <>
+            <Typography.Title level={5}>
+              {translate('interventions.form.labels.description')}:
+            </Typography.Title>
+            <MarkdownRender content={intervention.data.description} />
+          </>
+        ) : null}
       </Card>
       <AttachmentList
         resource="intervention"

src/shared/components/markdown-editor.tsx

@@ -0,0 +1,55 @@
+import MDEditor, { commands } from '@uiw/react-md-editor';
+import type React from 'react';
+import rehypeSanitize from 'rehype-sanitize';
+
+interface MarkdownEditorProps {
+  value?: string;
+  onChange?: (value: string | undefined) => void;
+  id?: string;
+}
+
+/**
+ * A markdown editor component with sanitization support.
+ *
+ * Supports the following markdown features:
+ * - Bold text
+ * - Italic text
+ * - Strikethrough
+ * - Links
+ *
+ * Content is sanitized using rehype-sanitize to prevent XSS attacks.
+ *
+ * Usage example:
+ * ```tsx
+ * <MarkdownEditor value={markdown} onChange={setMarkdown} />
+ * ```
+ *
+ * Limitations:
+ * - Only the listed markdown features are supported.
+ * - Other markdown features (e.g., tables, code blocks) may not be available.
+ */
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  id,
+  value,
+  onChange,
+}) => {
+  return (
+    <MDEditor
+      id={id}
+      value={value}
+      onChange={onChange}
+      data-color-mode="light"
+      commands={[
+        commands.bold,
+        commands.italic,
+        commands.strikethrough,
+        commands.link,
+      ]}
+      previewOptions={{
+        rehypePlugins: [[rehypeSanitize]],
+      }}
+    />
+  );
+};
+
+export { MarkdownEditor };

src/shared/components/markdown-render.tsx

@@ -0,0 +1,26 @@
+import type React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeSanitize from 'rehype-sanitize';
+
+interface MarkdownRenderProps {
+  content?: string;
+}
+
+/**
+ * Renders markdown content as HTML.
+ *
+ * @param content - The markdown string to render. Can be undefined.
+ *
+ * @remarks
+ * This component uses react-markdown to safely parse and render markdown content.
+ * It's companion to the MarkdownEditor component.
+ */
+const MarkdownRender: React.FC<MarkdownRenderProps> = ({ content }) => {
+  return (
+    <ReactMarkdown rehypePlugins={[rehypeSanitize]}>
+      {content || ''}
+    </ReactMarkdown>
+  );
+};
+
+export { MarkdownRender };