From f2df912e0b0b143b6794e5ce8fa4453939580a0c Mon Sep 17 00:00:00 2001
From: sandrawillow001-afk <sandrawillow001@gmail.com>
Date: Mon, 28 Sep 2026 03:18:45 +0000
Subject: [PATCH] feat(frontend): add rich text editor for project descriptions
 (#795)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the plain description input on the project creation form with a
markdown-backed rich text editor so contributors can add formatting, links,
lists, code, and images while keeping descriptions portable and sanitized.

- Add RichTextEditor with a formatting toolbar, keyboard shortcuts, live
  sanitized preview, and URL/paste/drag-drop image insertion
- Wire the editor into the localized and non-localized project forms via
  react-hook-form Controller
- Fix an unclosed SyntaxHighlighter tag in MarkdownContent that broke the
  markdown renderer
- Document the component and add unit tests

Generated with Codebuff 🤖
Co-Authored-By: Codebuff <noreply@codebuff.com>
---
 docs/frontend/rich-text-editor.md             |  78 +++
 .../[locale]/dashboard/projects/new/page.tsx  |  21 +-
 frontend/app/dashboard/projects/new/page.tsx  |  21 +-
 .../components/markdown/MarkdownContent.tsx   |   2 +-
 .../components/markdown/RichTextEditor.tsx    | 444 ++++++++++++++++++
 .../__tests__/RichTextEditor.test.tsx         | 114 +++++
 6 files changed, 669 insertions(+), 11 deletions(-)
 create mode 100644 docs/frontend/rich-text-editor.md
 create mode 100644 frontend/components/markdown/RichTextEditor.tsx
 create mode 100644 frontend/components/markdown/__tests__/RichTextEditor.test.tsx

diff --git a/docs/frontend/rich-text-editor.md b/docs/frontend/rich-text-editor.md
new file mode 100644
index 00000000..81c2b2d2
--- /dev/null
+++ b/docs/frontend/rich-text-editor.md
@@ -0,0 +1,78 @@
+# Rich Text Editor (#795)
+
+`frontend/components/markdown/RichTextEditor.tsx` replaces the plain `Input`
+previously used for project descriptions. It gives contributors a formatting
+toolbar, image support, and a live preview while keeping **markdown** as the
+stored format.
+
+## Why markdown
+
+- Descriptions are persisted on-chain as part of `workDescription`, so a portable,
+  plain-text format avoids HTML escaping problems and payload bloat.
+- Rendering reuses `MarkdownContent`, which already sanitizes output with
+  `rehype-sanitize` and `remark-gfm` — no new dependencies were added.
+
+## Usage
+
+```tsx
+import { Controller } from 'react-hook-form';
+import { RichTextEditor } from '@/components/markdown/RichTextEditor';
+
+<Controller
+  name="description"
+  control={control}
+  render={({ field }) => (
+    <RichTextEditor
+      id="description"
+      value={field.value ?? ''}
+      onChange={field.onChange}
+      onBlur={field.onBlur}
+      maxLength={5000}
+      placeholder="Describe the work"
+    />
+  )}
+/>;
+```
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | Markdown source (required) |
+| `onChange` | `(value: string) => void` | Called on every edit (required) |
+| `id` / `name` | `string` | Wired to the textarea for labels and forms |
+| `placeholder` | `string` | Placeholder text |
+| `disabled` | `boolean` | Disables the toolbar and textarea |
+| `className` | `string` | Extra container classes |
+| `maxLength` | `number` | Shows a counter and truncates input |
+| `allowImages` | `boolean` | Toggle image insertion (default `true`) |
+| `onBlur` | `() => void` | Forwarded to the textarea (react-hook-form support) |
+| `aria-invalid` / `aria-describedby` | — | Forwarded for validation messaging |
+
+## supported formatting
+
+Bold, italic, strikethrough, `##`/`###` headings, bullet and numbered lists,
+block quotes, fenced code blocks, and links. Keyboard shortcuts match common
+editors: `Cmd/Ctrl+B`, `Cmd/Ctrl+I`, `Cmd/Ctrl+K`.
+
+## Images
+
+Images can be inserted three ways:
+
+1. **Toolbar** — choose *Insert image* and provide a URL plus alt text.
+2. **Paste** — paste an image from the clipboard (≤ 5MB).
+3. **Drag & drop** — drop an image file onto the textarea (≤ 5MB).
+
+Pasted/dropped files are inlined as data URLs. For production uploads, prefer
+the server-side `POST /api/v1/uploads` endpoint and reference the returned URL.
+
+## Preview
+
+The *Preview* toggle renders the markdown through `MarkdownContent` with
+sanitization enabled, so raw HTML and unsafe links are stripped before display.
+
+## Tests
+
+`frontend/components/markdown/__tests__/RichTextEditor.test.tsx` covers
+formatting, list prefixes, image insertion/validation, preview rendering, the
+character limit, and the disabled state.
diff --git a/frontend/app/[locale]/dashboard/projects/new/page.tsx b/frontend/app/[locale]/dashboard/projects/new/page.tsx
index 27f8754f..c60e3993 100644
--- a/frontend/app/[locale]/dashboard/projects/new/page.tsx
+++ b/frontend/app/[locale]/dashboard/projects/new/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -22,6 +22,7 @@ import { toast } from 'sonner';
 import { useAgenticPay } from '@/lib/hooks/useAgenticPay';
 import { useAccount } from 'wagmi';
 import { ConfirmModal } from '@/components/transaction/ConfirmModal';
+import { RichTextEditor } from '@/components/markdown/RichTextEditor';
 import { parseEther } from 'viem';
 
 type PendingTransaction = {
@@ -136,6 +137,7 @@ export default function CreateProjectPage() {
 
   const {
     register,
+    control,
     handleSubmit,
     formState: { errors },
     watch,
@@ -248,10 +250,19 @@ export default function CreateProjectPage() {
 
               <div>
                 <Label htmlFor="description">Description</Label>
-                <Input
-                  id="description"
-                  {...register('description')}
-                  placeholder="Brief description of work"
+                <Controller
+                  name="description"
+                  control={control}
+                  render={({ field }) => (
+                    <RichTextEditor
+                      id="description"
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                      onBlur={field.onBlur}
+                      maxLength={5000}
+                      placeholder="Describe the work — supports **markdown**, images, and formatting"
+                    />
+                  )}
                 />
               </div>
 
diff --git a/frontend/app/dashboard/projects/new/page.tsx b/frontend/app/dashboard/projects/new/page.tsx
index 27f8754f..c60e3993 100644
--- a/frontend/app/dashboard/projects/new/page.tsx
+++ b/frontend/app/dashboard/projects/new/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -22,6 +22,7 @@ import { toast } from 'sonner';
 import { useAgenticPay } from '@/lib/hooks/useAgenticPay';
 import { useAccount } from 'wagmi';
 import { ConfirmModal } from '@/components/transaction/ConfirmModal';
+import { RichTextEditor } from '@/components/markdown/RichTextEditor';
 import { parseEther } from 'viem';
 
 type PendingTransaction = {
@@ -136,6 +137,7 @@ export default function CreateProjectPage() {
 
   const {
     register,
+    control,
     handleSubmit,
     formState: { errors },
     watch,
@@ -248,10 +250,19 @@ export default function CreateProjectPage() {
 
               <div>
                 <Label htmlFor="description">Description</Label>
-                <Input
-                  id="description"
-                  {...register('description')}
-                  placeholder="Brief description of work"
+                <Controller
+                  name="description"
+                  control={control}
+                  render={({ field }) => (
+                    <RichTextEditor
+                      id="description"
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                      onBlur={field.onBlur}
+                      maxLength={5000}
+                      placeholder="Describe the work — supports **markdown**, images, and formatting"
+                    />
+                  )}
                 />
               </div>
 
diff --git a/frontend/components/markdown/MarkdownContent.tsx b/frontend/components/markdown/MarkdownContent.tsx
index ab0db372..f24051b6 100644
--- a/frontend/components/markdown/MarkdownContent.tsx
+++ b/frontend/components/markdown/MarkdownContent.tsx
@@ -46,7 +46,7 @@ export function MarkdownContent({
               customStyle={{ margin: 0, borderRadius: '0.375rem', fontSize: '0.8125rem' }}
             >
               {code}
-            SyntaxHighlighter>
+            </SyntaxHighlighter>
           );
         }
         return (
diff --git a/frontend/components/markdown/RichTextEditor.tsx b/frontend/components/markdown/RichTextEditor.tsx
new file mode 100644
index 00000000..48beedda
--- /dev/null
+++ b/frontend/components/markdown/RichTextEditor.tsx
@@ -0,0 +1,444 @@
+'use client';
+
+/**
+ * RichTextEditor — Issue #795
+ *
+ * A dependency-free, markdown-backed rich text editor used for project
+ * descriptions. It renders a formatting toolbar, a textarea, and an optional
+ * live preview that reuses {@link MarkdownContent} for sanitized rendering.
+ *
+ * Markdown is stored as the source of truth so descriptions stay portable and
+ * safe to persist/transport; the toolbar just inserts the corresponding syntax.
+ */
+
+import {
+  useCallback,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type DragEvent,
+  type ReactNode,
+} from 'react';
+import {
+  Bold,
+  Code,
+  Eye,
+  Heading2,
+  Heading3,
+  Image as ImageIcon,
+  Italic,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Pencil,
+  Quote,
+  Strikethrough,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { MarkdownContent } from '@/components/markdown/MarkdownContent';
+import { cn } from '@/lib/utils';
+
+const MAX_IMAGE_BYTES = 5 * 1024 * 1024; // 5MB
+
+type ToolbarAction =
+  | 'bold'
+  | 'italic'
+  | 'strikethrough'
+  | 'heading2'
+  | 'heading3'
+  | 'bulletList'
+  | 'numberedList'
+  | 'quote'
+  | 'code'
+  | 'link';
+
+// Static toolbar definition lives at module scope so it never captures the
+// editor's ref during render (see the `react-hooks/refs` rule).
+const TOOLBAR_ITEMS: Array<{ action: ToolbarAction; label: string; icon: ReactNode }> = [
+  { action: 'bold', label: 'Bold', icon: <Bold className="h-4 w-4" /> },
+  { action: 'italic', label: 'Italic', icon: <Italic className="h-4 w-4" /> },
+  { action: 'strikethrough', label: 'Strikethrough', icon: <Strikethrough className="h-4 w-4" /> },
+  { action: 'heading2', label: 'Heading 2', icon: <Heading2 className="h-4 w-4" /> },
+  { action: 'heading3', label: 'Heading 3', icon: <Heading3 className="h-4 w-4" /> },
+  { action: 'bulletList', label: 'Bullet list', icon: <List className="h-4 w-4" /> },
+  { action: 'numberedList', label: 'Numbered list', icon: <ListOrdered className="h-4 w-4" /> },
+  { action: 'quote', label: 'Quote', icon: <Quote className="h-4 w-4" /> },
+  { action: 'code', label: 'Code block', icon: <Code className="h-4 w-4" /> },
+  { action: 'link', label: 'Link', icon: <LinkIcon className="h-4 w-4" /> },
+];
+
+export interface RichTextEditorProps {
+  /** Current markdown source. */
+  value: string;
+  /** Called with the updated markdown source on every edit. */
+  onChange: (value: string) => void;
+  /** Field id, wired to the underlying textarea for <Label htmlFor>. */
+  id?: string;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  /** When set, shows a character counter and enforces the limit. */
+  maxLength?: number;
+  /** Allow inserting images (URL or drag/drop). Defaults to true. */
+  allowImages?: boolean;
+  onBlur?: () => void;
+  'aria-invalid'?: boolean;
+  'aria-describedby'?: string;
+}
+
+interface SelectionState {
+  start: number;
+  end: number;
+}
+
+function applyWrap(
+  text: string,
+  { start, end }: SelectionState,
+  prefix: string,
+  suffix: string,
+  placeholder: string,
+) {
+  const selected = text.slice(start, end) || placeholder;
+  const next = text.slice(0, start) + prefix + selected + suffix + text.slice(end);
+  return {
+    next,
+    cursorStart: start + prefix.length,
+    cursorEnd: start + prefix.length + selected.length,
+  };
+}
+
+function applyLinePrefix(text: string, { start, end }: SelectionState, prefix: string) {
+  const lineStart = text.lastIndexOf('\n', Math.max(start - 1, 0)) + 1;
+  let lineEnd = text.indexOf('\n', end);
+  if (lineEnd === -1) lineEnd = text.length;
+
+  const block = text.slice(lineStart, lineEnd);
+  const lines = block.split('\n');
+  const allPrefixed = lines.every((line) => line.startsWith(prefix));
+  const nextLines = lines.map((line) => (allPrefixed ? line.slice(prefix.length) : `${prefix}${line}`));
+  const nextBlock = nextLines.join('\n');
+
+  return {
+    next: text.slice(0, lineStart) + nextBlock + text.slice(lineEnd),
+    cursorStart: lineStart,
+    cursorEnd: lineStart + nextBlock.length,
+  };
+}
+
+function insertAtCursor(text: string, { start, end }: SelectionState, snippet: string) {
+  const next = text.slice(0, start) + snippet + text.slice(end);
+  const cursor = start + snippet.length;
+  return { next, cursorStart: cursor, cursorEnd: cursor };
+}
+
+export function RichTextEditor({
+  value,
+  onChange,
+  id,
+  name,
+  placeholder = 'Write a description…',
+  disabled = false,
+  className,
+  maxLength,
+  allowImages = true,
+  onBlur,
+  'aria-invalid': ariaInvalid,
+  'aria-describedby': ariaDescribedBy,
+}: RichTextEditorProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [showPreview, setShowPreview] = useState(false);
+  const [showImageForm, setShowImageForm] = useState(false);
+  const [imageUrl, setImageUrl] = useState('');
+  const [imageAlt, setImageAlt] = useState('');
+  const [imageError, setImageError] = useState<string | null>(null);
+
+  const getSelection = useCallback((): SelectionState => {
+    const el = textareaRef.current;
+    if (!el) return { start: value.length, end: value.length };
+    return { start: el.selectionStart, end: el.selectionEnd };
+  }, [value.length]);
+
+  const focusSelection = useCallback((start: number, end: number) => {
+    // Wait for React to flush the controlled value before restoring selection.
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange(start, end);
+    });
+  }, []);
+
+  const commit = useCallback(
+    (next: string, start: number, end: number) => {
+      onChange(next);
+      focusSelection(start, end);
+    },
+    [onChange, focusSelection],
+  );
+
+  const handleWrap = useCallback(
+    (prefix: string, suffix: string, placeholderText: string) => {
+      if (disabled) return;
+      const result = applyWrap(value, getSelection(), prefix, suffix, placeholderText);
+      commit(result.next, result.cursorStart, result.cursorEnd);
+    },
+    [commit, disabled, getSelection, value],
+  );
+
+  const handleLinePrefix = useCallback(
+    (prefix: string) => {
+      if (disabled) return;
+      const result = applyLinePrefix(value, getSelection(), prefix);
+      commit(result.next, result.cursorStart, result.cursorEnd);
+    },
+    [commit, disabled, getSelection, value],
+  );
+
+  const handleInsert = useCallback(
+    (snippet: string) => {
+      if (disabled) return;
+      const result = insertAtCursor(value, getSelection(), snippet);
+      commit(result.next, result.cursorStart, result.cursorEnd);
+    },
+    [commit, disabled, getSelection, value],
+  );
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const next = maxLength ? event.target.value.slice(0, maxLength) : event.target.value;
+    onChange(next);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!(event.metaKey || event.ctrlKey)) return;
+    const key = event.key.toLowerCase();
+    if (key === 'b') {
+      event.preventDefault();
+      handleWrap('**', '**', 'bold text');
+    } else if (key === 'i') {
+      event.preventDefault();
+      handleWrap('*', '*', 'italic text');
+    } else if (key === 'k') {
+      event.preventDefault();
+      handleWrap('[', '](https://)', 'link text');
+    }
+  };
+
+  const insertImage = (url: string, alt: string) => {
+    const trimmed = url.trim();
+    if (!trimmed) {
+      setImageError('Image URL is required');
+      return;
+    }
+    setImageError(null);
+    handleInsert(`![${alt.trim() || 'image'}](${trimmed})`);
+    setImageUrl('');
+    setImageAlt('');
+    setShowImageForm(false);
+  };
+
+  const handleImageFile = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith('image/')) {
+        setImageError('Only image files are supported');
+        return;
+      }
+      if (file.size > MAX_IMAGE_BYTES) {
+        setImageError('Image must be smaller than 5MB');
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = () => {
+        setImageError(null);
+        handleInsert(`![${file.name}](${String(reader.result)})`);
+      };
+      reader.onerror = () => setImageError('Failed to read image file');
+      reader.readAsDataURL(file);
+    },
+    [handleInsert],
+  );
+
+  const handlePaste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    if (!allowImages || disabled) return;
+    const file = Array.from(event.clipboardData?.files ?? []).find((f) => f.type.startsWith('image/'));
+    if (file) {
+      event.preventDefault();
+      handleImageFile(file);
+    }
+  };
+
+  const handleDrop = (event: DragEvent<HTMLTextAreaElement>) => {
+    if (!allowImages || disabled) return;
+    const file = Array.from(event.dataTransfer?.files ?? []).find((f) => f.type.startsWith('image/'));
+    if (file) {
+      event.preventDefault();
+      handleImageFile(file);
+    }
+  };
+
+  const runToolbarAction = (action: ToolbarAction) => {
+    switch (action) {
+      case 'bold':
+        return handleWrap('**', '**', 'bold text');
+      case 'italic':
+        return handleWrap('*', '*', 'italic text');
+      case 'strikethrough':
+        return handleWrap('~~', '~~', 'strikethrough');
+      case 'heading2':
+        return handleLinePrefix('## ');
+      case 'heading3':
+        return handleLinePrefix('### ');
+      case 'bulletList':
+        return handleLinePrefix('- ');
+      case 'numberedList':
+        return handleLinePrefix('1. ');
+      case 'quote':
+        return handleLinePrefix('> ');
+      case 'code':
+        return handleWrap('```\n', '\n```', 'code');
+      case 'link':
+        return handleWrap('[', '](https://)', 'link text');
+    }
+  };
+
+  const sourceLength = value.length;
+
+  return (
+    <div className={cn('rounded-md border border-input bg-background', className)} data-testid="rich-text-editor">
+      <div className="flex flex-wrap items-center gap-1 border-b p-1.5" role="toolbar" aria-label="Formatting">
+        {TOOLBAR_ITEMS.map((item) => (
+          <Button
+            key={item.label}
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="h-8 w-8 p-0"
+            aria-label={item.label}
+            title={item.label}
+            disabled={disabled}
+            onClick={() => runToolbarAction(item.action)}
+          >
+            {item.icon}
+          </Button>
+        ))}
+
+        {allowImages && (
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="h-8 w-8 p-0"
+            aria-label="Insert image"
+            title="Insert image"
+            disabled={disabled}
+            onClick={() => setShowImageForm((open) => !open)}
+          >
+            <ImageIcon className="h-4 w-4" />
+          </Button>
+        )}
+
+        <div className="ml-auto flex items-center gap-1">
+          <Button
+            type="button"
+            size="sm"
+            variant={showPreview ? 'default' : 'ghost'}
+            className="h-8 gap-1 px-2 text-xs"
+            aria-pressed={showPreview}
+            disabled={disabled}
+            onClick={() => setShowPreview((preview) => !preview)}
+          >
+            {showPreview ? <Pencil className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+            {showPreview ? 'Edit' : 'Preview'}
+          </Button>
+        </div>
+      </div>
+
+      {showImageForm && allowImages && (
+        <div className="space-y-2 border-b bg-muted/30 p-3" data-testid="image-form">
+          <div className="grid gap-2 sm:grid-cols-2">
+            <div className="space-y-1">
+              <Label htmlFor={id ? `${id}-image-url` : undefined} className="text-xs">
+                Image URL
+              </Label>
+              <Input
+                id={id ? `${id}-image-url` : undefined}
+                value={imageUrl}
+                onChange={(event) => setImageUrl(event.target.value)}
+                placeholder="https://example.com/screenshot.png"
+                aria-label="Image URL"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor={id ? `${id}-image-alt` : undefined} className="text-xs">
+                Alt text
+              </Label>
+              <Input
+                id={id ? `${id}-image-alt` : undefined}
+                value={imageAlt}
+                onChange={(event) => setImageAlt(event.target.value)}
+                placeholder="Screenshot of the design"
+                aria-label="Image alt text"
+              />
+            </div>
+          </div>
+          {imageError && <p className="text-xs text-red-600">{imageError}</p>}
+          <div className="flex gap-2">
+            <Button type="button" size="sm" onClick={() => insertImage(imageUrl, imageAlt)}>
+              Insert
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                setShowImageForm(false);
+                setImageError(null);
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {showPreview ? (
+        <div className="min-h-[120px] p-3" data-testid="rich-text-preview">
+          {value.trim() ? (
+            <MarkdownContent content={value} previewMode={false} />
+          ) : (
+            <p className="text-sm text-muted-foreground">{placeholder}</p>
+          )}
+        </div>
+      ) : (
+        <Textarea
+          id={id}
+          name={name}
+          ref={textareaRef}
+          value={value}
+          onChange={handleChange}
+          onBlur={onBlur}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onDrop={handleDrop}
+          placeholder={placeholder}
+          disabled={disabled}
+          aria-invalid={ariaInvalid}
+          aria-describedby={ariaDescribedBy}
+          className="min-h-[120px] resize-y rounded-none border-0 focus-visible:ring-0"
+        />
+      )}
+
+      {typeof maxLength === 'number' && (
+        <div className="border-t px-3 py-1 text-right text-xs text-muted-foreground">
+          {sourceLength}/{maxLength}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default RichTextEditor;
diff --git a/frontend/components/markdown/__tests__/RichTextEditor.test.tsx b/frontend/components/markdown/__tests__/RichTextEditor.test.tsx
new file mode 100644
index 00000000..6b2fba59
--- /dev/null
+++ b/frontend/components/markdown/__tests__/RichTextEditor.test.tsx
@@ -0,0 +1,114 @@
+/**
+ * RichTextEditor tests — Issue #795
+ * Covers formatting, markdown insertion, images, preview, and limits.
+ */
+import { useState } from 'react';
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RichTextEditor, type RichTextEditorProps } from '@/components/markdown/RichTextEditor';
+
+// `globals` is disabled in vitest.config.ts, so React Testing Library cannot
+// register its automatic cleanup — do it explicitly to keep tests isolated.
+afterEach(cleanup);
+
+function Harness(props: Partial<RichTextEditorProps> & { initial?: string }) {
+  const { initial = '', ...rest } = props;
+  const [value, setValue] = useState(initial);
+  return <RichTextEditor value={value} onChange={setValue} {...rest} />;
+}
+
+function getTextarea() {
+  return screen.getByRole('textbox') as HTMLTextAreaElement;
+}
+
+describe('RichTextEditor', () => {
+  it('renders the toolbar and an editable textarea', () => {
+    render(<Harness initial="Hello" />);
+    expect(screen.getByRole('toolbar', { name: 'Formatting' })).toBeTruthy();
+    expect(screen.getByLabelText('Bold')).toBeTruthy();
+    expect(screen.getByLabelText('Insert image')).toBeTruthy();
+    expect(getTextarea().value).toBe('Hello');
+  });
+
+  it('reports edits through onChange', () => {
+    const onChange = vi.fn();
+    render(<RichTextEditor value="" onChange={onChange} />);
+    fireEvent.change(getTextarea(), { target: { value: 'New description' } });
+    expect(onChange).toHaveBeenCalledWith('New description');
+  });
+
+  it('wraps the current selection in bold syntax', async () => {
+    const user = userEvent.setup();
+    render(<Harness initial="hello world" />);
+    const textarea = getTextarea();
+    textarea.setSelectionRange(0, 5);
+
+    await user.click(screen.getByLabelText('Bold'));
+
+    expect(textarea.value).toBe('**hello** world');
+  });
+
+  it('applies a bullet-list prefix to the selected lines', async () => {
+    const user = userEvent.setup();
+    render(<Harness initial={'one\ntwo'} />);
+    const textarea = getTextarea();
+    textarea.setSelectionRange(0, 3);
+
+    await user.click(screen.getByLabelText('Bullet list'));
+
+    expect(textarea.value).toBe('- one\ntwo');
+  });
+
+  it('inserts a markdown image from the image form', async () => {
+    const user = userEvent.setup();
+    render(<Harness />);
+
+    await user.click(screen.getByLabelText('Insert image'));
+    await user.type(screen.getByLabelText('Image URL'), 'https://example.com/pic.png');
+    await user.type(screen.getByLabelText('Image alt text'), 'Design mockup');
+    await user.click(screen.getByRole('button', { name: 'Insert' }));
+
+    expect(getTextarea().value).toBe('![Design mockup](https://example.com/pic.png)');
+  });
+
+  it('shows an error when inserting an image without a URL', async () => {
+    const user = userEvent.setup();
+    render(<Harness />);
+
+    await user.click(screen.getByLabelText('Insert image'));
+    await user.click(screen.getByRole('button', { name: 'Insert' }));
+
+    expect(screen.getByText('Image URL is required')).toBeTruthy();
+  });
+
+  it('toggles between edit and sanitized preview', async () => {
+    const user = userEvent.setup();
+    render(<Harness initial="**bold** description" />);
+
+    await user.click(screen.getByRole('button', { name: 'Preview' }));
+
+    const preview = screen.getByTestId('rich-text-preview');
+    expect(preview.querySelector('strong')?.textContent).toBe('bold');
+    expect(screen.queryByRole('textbox')).toBeNull();
+
+    await user.click(screen.getByRole('button', { name: /Edit/ }));
+    expect(getTextarea()).toBeTruthy();
+  });
+
+  it('enforces the maxLength limit and renders a counter', () => {
+    const onChange = vi.fn();
+    render(<RichTextEditor value="abc" onChange={onChange} maxLength={3} />);
+
+    fireEvent.change(getTextarea(), { target: { value: 'abcd' } });
+
+    expect(onChange).toHaveBeenCalledWith('abc');
+    expect(screen.getByText('3/3')).toBeTruthy();
+  });
+
+  it('disables formatting controls when disabled', () => {
+    render(<RichTextEditor value="" onChange={vi.fn()} disabled />);
+    expect((screen.getByLabelText('Bold') as HTMLButtonElement).disabled).toBe(true);
+    expect((getTextarea() as HTMLTextAreaElement).disabled).toBe(true);
+  });
+});