Refactor campaign recipient and review presentation

webui/src/features/campaigns/wizard/CreateWizard.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import type { ApiSettings, WizardStep } from "../../../types";
 import { Stepper } from "@govoplan/core-webui";
 import { Card } from "@govoplan/core-webui";

webui/src/features/campaigns/wizard/steps/CreateWizardSteps.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
 import { Button } from "@govoplan/core-webui";
+import { FieldLabel } from "@govoplan/core-webui";
 import { FormField } from "@govoplan/core-webui";
 import { ToggleSwitch } from "@govoplan/core-webui";
 import { EmailAddressInput } from "@govoplan/core-webui";
 import { MetricCard } from "@govoplan/core-webui";
+import { WysiwygEditor } from "@govoplan/core-webui/wysiwyg";
 import { addressesFromValue, collectCampaignAddressSuggestions, type MailboxAddress } from "@govoplan/core-webui";
 import { asArray, asRecord, stringifyPreview, summaryValue } from "../../utils/campaignView";
 import { getBool, getNumber, getText, parseJsonTextarea, stringifyJson } from "../../utils/draftEditor";
@@ -145,7 +147,16 @@ export function TemplateStep({ draft, patch }: WizardStepProps) {
       <div className="form-grid">
         <FormField label="i18n:govoplan-campaign.subject.8d183dbd"><input value={getText(template, "subject")} onChange={(event) => patch(["template", "subject"], event.target.value)} /></FormField>
         <FormField label="i18n:govoplan-campaign.plain_text_body.030a0da0"><textarea rows={12} value={getText(template, "text")} onChange={(event) => patch(["template", "text"], event.target.value)} /></FormField>
-        <FormField label="i18n:govoplan-campaign.html_body.77b5ba37"><textarea rows={8} value={getText(template, "html")} onChange={(event) => patch(["template", "html"], event.target.value)} /></FormField>
+        <div className="form-field">
+          <FieldLabel className="form-label">i18n:govoplan-campaign.html_body.77b5ba37</FieldLabel>
+          <WysiwygEditor
+            value={getText(template, "html")}
+            ariaLabel="i18n:govoplan-campaign.html_body.77b5ba37"
+            minHeight={240}
+            sourceRows={10}
+            onChange={(value) => patch(["template", "html"], value)}
+          />
+        </div>
       </div>
     </div>);