feat: replace Markdown editor with Text editor and update related com…

…ponents
EyeSeeTea · Jan 17, 2025 · 0eb7b5d · 0eb7b5d
1 parent 366140e
commit 0eb7b5d
Show file tree

Hide file tree

Showing 11 changed files with 137 additions and 699 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-01-16T15:57:52.356Z\n"
-"PO-Revision-Date: 2025-01-16T15:57:52.356Z\n"
+"POT-Creation-Date: 2025-01-17T09:18:30.045Z\n"
+"PO-Revision-Date: 2025-01-17T09:18:30.045Z\n"
 
 msgid "Low"
 msgstr ""

diff --git a/package.json b/package.json
@@ -38,8 +38,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.3.5",
-        "react-markdown": "^9.0.3",
-        "react-mde": "^11.5.0",
+        "react-quill": "^2.0.0",
         "react-router-dom": "5.2.0",
         "real-cancellable-promise": "^1.1.2",
         "string-ts": "2.2.0",

diff --git a/src/webapp/components/form/FieldWidget.tsx b/src/webapp/components/form/FieldWidget.tsx
@@ -10,7 +10,7 @@ import { DatePicker } from "../date-picker/DatePicker";
 import { Checkbox } from "../checkbox/Checkbox";
 import { FormFieldState, updateFieldState, SheetData } from "./FormFieldsState";
 import { ImportFile } from "../import-file/ImportFile";
-import MarkdownEditor from "../markdown-editor/MarkdownEditor";
+import { TextEditor } from "../text-editor/TextEditor";
 
 export type FieldWidgetProps = {
     onChange: (updatedField: FormFieldState) => void;
@@ -80,8 +80,8 @@ export const FieldWidget: React.FC<FieldWidgetProps> = React.memo((props): JSX.E
                 <TextInput {...commonProps} value={field.value} />
             );
 
-        case "markdown":
-            return <MarkdownEditor {...commonProps} value={field.value} />;
+        case "text-editor":
+            return <TextEditor {...commonProps} value={field.value} />;
 
         case "date":
             return <DatePicker {...commonProps} value={field.value} />;

diff --git a/src/webapp/components/form/FormFieldsState.ts b/src/webapp/components/form/FormFieldsState.ts
@@ -16,7 +16,7 @@ export type FieldType =
     | "user"
     | "addNew"
     | "file"
-    | "markdown";
+    | "text-editor";
 
 type FormFieldStateBase<T> = {
     id: string;
@@ -81,8 +81,8 @@ export type FormFileFieldState = FormFieldStateBase<Maybe<File>> & {
     fileNameLabel?: string;
 };
 
-export type FormMarkdownFieldState = FormFieldStateBase<string> & {
-    type: "markdown";
+export type FormTextEditorFieldState = FormFieldStateBase<string> & {
+    type: "text-editor";
 };
 
 export type AddNewFieldState = FormFieldStateBase<null> & {
@@ -97,7 +97,7 @@ export type FormFieldState =
     | FormDateFieldState
     | FormAvatarFieldState
     | FormFileFieldState
-    | FormMarkdownFieldState;
+    | FormTextEditorFieldState;
 
 // HELPERS:
 
@@ -166,7 +166,7 @@ export function getFieldIdFromIdsDictionary<T extends Record<string, string>>(
 export function getFieldWithEmptyValue(field: FormFieldState): FormFieldState {
     switch (field.type) {
         case "text":
-        case "markdown":
+        case "text-editor":
             return { ...field, value: "" };
         case "boolean":
             return { ...field, value: false };

diff --git a/src/webapp/components/form/form-summary/ActionPlanFormSummary.tsx b/src/webapp/components/form/form-summary/ActionPlanFormSummary.tsx
@@ -14,7 +14,7 @@ import {
     IncidentActionSummary,
 } from "../../../pages/incident-action-plan/useIncidentActionPlan";
 import { Maybe } from "../../../../utils/ts-utils";
-import MarkdownPreview from "../../markdown-editor/MarkdownPreview";
+import { TextPreview } from "../../text-editor/TextEditor";
 
 type ActionPlanFormSummaryProps = {
     id: Id;
@@ -54,17 +54,18 @@ export const ActionPlanFormSummary: React.FC<ActionPlanFormSummaryProps> = React
         const { field, label, value } = incidentActionSummary;
 
         switch (field) {
-            case "responseStrategies":
+            case "responseActivitiesNarrative":
                 return (
-                    <>
+                    <Typography key={field}>
                         <Box fontWeight="bold">{i18n.t(label)}:</Box>
-                        <MarkdownPreview value={value} />
-                    </>
+                        <TextPreview value={value} />
+                    </Typography>
                 );
             default:
                 return (
                     <Typography key={field}>
-                        <Box fontWeight="bold">{i18n.t(label)}:</Box> {i18n.t(value)}
+                        <Box fontWeight="bold">{i18n.t(label)}:</Box>
+                        {i18n.t(value)}
                     </Typography>
                 );
         }

diff --git a/src/webapp/components/form/form-summary/EventTrackerFormSummary.tsx b/src/webapp/components/form/form-summary/EventTrackerFormSummary.tsx
@@ -15,7 +15,7 @@ import { FormSummaryData } from "../../../pages/event-tracker/useDiseaseOutbreak
 import { Maybe } from "../../../../utils/ts-utils";
 import { Id } from "../../../../domain/entities/Ref";
 import { GlobalMessage } from "../../../pages/form-page/useForm";
-import MarkdownPreview from "../../markdown-editor/MarkdownPreview";
+import { TextPreview } from "../../text-editor/TextEditor";
 
 export type EventTrackerFormSummaryProps = {
     id: Id;
@@ -142,7 +142,7 @@ export const EventTrackerFormSummary: React.FC<EventTrackerFormSummaryProps> = R
                     <Box fontWeight="bold" display="inline">
                         {i18n.t("Notes")}:
                     </Box>{" "}
-                    <MarkdownPreview value={formSummary.notes} />
+                    <TextPreview value={formSummary.notes} />
                 </StyledType>
             </Section>
         </>

diff --git a/src/webapp/components/markdown-editor/MarkdownPreview.tsx b/src/webapp/components/markdown-editor/MarkdownPreview.tsx
diff --git a/...onents/markdown-editor/MarkdownEditor.tsx → ...app/components/text-editor/TextEditor.tsx b/...onents/markdown-editor/MarkdownEditor.tsx → ...app/components/text-editor/TextEditor.tsx
@@ -1,22 +1,22 @@
-import React, { useState } from "react";
-import ReactMde from "react-mde";
-import "react-mde/lib/styles/css/react-mde-all.css";
-import styled from "styled-components";
 import { FormHelperText, InputLabel } from "@material-ui/core";
-import MarkdownPreview from "./MarkdownPreview";
+import React from "react";
+import ReactQuill from "react-quill";
+import styled from "styled-components";
+import "react-quill/dist/quill.snow.css";
 
-type MarkdownEditorProps = {
+type TextEditorProps = {
     id: string;
     label?: string;
     value: string;
     onChange: (newValue: string) => void;
     helperText?: string;
     errorText?: string;
     required?: boolean;
+    disabled?: boolean;
     error?: boolean;
 };
 
-const MarkdownEditor: React.FC<MarkdownEditorProps> = React.memo(
+export const TextEditor: React.FC<TextEditorProps> = React.memo(
     ({
         id,
         label,
@@ -25,45 +25,58 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = React.memo(
         helperText = "",
         errorText = "",
         required = false,
+        disabled = false,
         error = false,
     }) => {
-        const [selectedTab, setSelectedTab] = useState<"write" | "preview">("write");
-
         return (
-            <MarkdownEditorContainer>
+            <TextEditorContainer>
                 {label && (
                     <Label className={required ? "required" : ""} htmlFor={id}>
                         {label}
                     </Label>
                 )}
 
-                <ReactMde
+                <ReactQuill
                     value={value}
                     onChange={onChange}
-                    selectedTab={selectedTab}
-                    onTabChange={setSelectedTab}
-                    generateMarkdownPreview={markdown =>
-                        Promise.resolve(<MarkdownPreview value={markdown} />)
-                    }
-                    toolbarCommands={[
-                        ["bold", "italic"],
-                        ["unordered-list", "ordered-list"],
-                        ["link", "code"],
-                    ]}
+                    modules={{ toolbar: toolbarOptions }}
+                    formats={formats}
+                    readOnly={disabled}
                 />
 
                 <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
-                    {error && !!errorText ? errorText : helperText}
+                    {error && !!errorText ? errorText : helperText}{" "}
                 </StyledFormHelperText>
-            </MarkdownEditorContainer>
+            </TextEditorContainer>
         );
     }
 );
 
-export default MarkdownEditor;
+export const TextPreview: React.FC<{
+    value: string;
+}> = React.memo(({ value }) => {
+    return <StyledTextEditor value={value} modules={{ toolbar: false }} readOnly={true} />;
+});
+
+const StyledTextEditor = styled(ReactQuill)`
+    .ql-editor {
+        line-height: 2;
+    }
+    .ql-container {
+        border: none;
+        font-size: 16px;
+    }
+`;
 
-const MarkdownEditorContainer = styled.div`
+const TextEditorContainer = styled.div`
     width: 100%;
+    .ql-editor {
+        line-height: 2;
+
+        p {
+            margin: 8px;
+        }
+    }
 `;
 
 const Label = styled(InputLabel)`
@@ -84,3 +97,13 @@ const StyledFormHelperText = styled(FormHelperText)<{ error?: boolean }>`
     color: ${props =>
         props.error ? props.theme.palette.common.red700 : props.theme.palette.common.grey700};
 `;
+
+const toolbarOptions = [
+    [{ bold: true }, { italic: true }, { underline: true }],
+    [{ size: ["small", false, "large", "huge"] }],
+    [{ color: [] }],
+    [{ align: [] }],
+    [{ list: "ordered" }, { list: "bullet" }],
+];
+
+const formats = ["bold", "italic", "underline", "size", "color", "align", "list", "bullet"];
diff --git a/...ebapp/pages/form-page/disease-outbreak-event/mapDiseaseOutbreakEventToInitialFormState.ts b/...ebapp/pages/form-page/disease-outbreak-event/mapDiseaseOutbreakEventToInitialFormState.ts
@@ -720,7 +720,7 @@ function getInitialFormStateForDiseaseOutbreakEvent(
                     id: fromIdsDictionary("notes"),
                     isVisible: true,
                     errors: [],
-                    type: "markdown",
+                    type: "text-editor",
                     value: diseaseOutbreakEvent?.notes || "",
                 },
             ],

diff --git a/src/webapp/pages/form-page/incident-action/mapIncidentActionToInitialFormState.ts b/src/webapp/pages/form-page/incident-action/mapIncidentActionToInitialFormState.ts
@@ -192,7 +192,7 @@ export function mapIncidentActionPlanToInitialFormState(
                     id: `${actionPlanConstants.responseActivitiesNarrative}-section`,
                     isVisible: true,
                     errors: [],
-                    type: "markdown",
+                    type: "text-editor",
                     value: incidentActionPlan?.responseActivitiesNarrative || "",
                 },
             ],