Move CSS hack for wysiwyg editor to backend repo

Author: rolandgeider

src/components/Exercises/Add/Step3Description.tsx

@@ -1,33 +1,17 @@
-import { Box, Button, Grid, Stack, TextField } from "@mui/material";
+import { Box, Button, Grid, Stack } from "@mui/material";
 import { StepProps } from "components/Exercises/Add/AddExerciseStepper";
 import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails";
+import { ExerciseDescription } from "components/Exercises/forms/ExerciseDescription";
 import { ExerciseNotes } from "components/Exercises/forms/ExerciseNotes";
 import { descriptionValidator, noteValidator } from "components/Exercises/forms/yupValidators";
-import { Form, Formik, useField } from "formik";
+import { Form, Formik } from "formik";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useExerciseStateValue } from "state";
 import { setDescriptionEn, setNotesEn } from "state/exerciseReducer";
 import * as yup from "yup";
 
 
-export function ExerciseTempDescription(props: { fieldName: string }) {
-    const [t] = useTranslation();
-    const [field, meta] = useField(props.fieldName);
-
-    return <TextField
-        fullWidth
-        id={props.fieldName}
-        label={t("description")}
-        variant="standard"
-        error={meta.touched && Boolean(meta.error)}
-        helperText={meta.touched && meta.error}
-        multiline
-        rows={4}
-        {...field}
-    />;
-}
-
 export const Step3Description = ({ onContinue, onBack }: StepProps) => {
     const [t] = useTranslation();
     const [state, dispatch] = useExerciseStateValue();
@@ -52,10 +36,10 @@ export const Step3Description = ({ onContinue, onBack }: StepProps) => {
         >
             <Form>
                 <Stack>
-                    <ExerciseTempDescription fieldName={'description'} />
-                    {/*<ExerciseDescription fieldName={"description"} /> */}
+                    <ExerciseDescription fieldName={"description"} />
 
                     <PaddingBox />
+                    
                     <ExerciseNotes fieldName={'notes'} />
 
                     <Grid container>

src/components/Exercises/Add/Step4Translations.tsx

@@ -13,9 +13,9 @@ import {
 } from "@mui/material";
 import { LoadingWidget } from "components/Core/LoadingWidget/LoadingWidget";
 import { StepProps } from "components/Exercises/Add/AddExerciseStepper";
-import { ExerciseTempDescription } from "components/Exercises/Add/Step3Description";
 import { PaddingBox } from "components/Exercises/Detail/ExerciseDetails";
 import { ExerciseAliases } from "components/Exercises/forms/ExerciseAliases";
+import { ExerciseDescription } from "components/Exercises/forms/ExerciseDescription";
 import { ExerciseName } from "components/Exercises/forms/ExerciseName";
 import { ExerciseNotes } from "components/Exercises/forms/ExerciseNotes";
 import {
@@ -123,8 +123,7 @@ export const Step4Translations = ({ onContinue, onBack }: StepProps) => {
 
                         <ExerciseAliases fieldName={'alternativeNames'} />
 
-                        <ExerciseTempDescription fieldName={'description'} />
-                        {/*<ExerciseDescription fieldName={"description"} /> */}
+                        <ExerciseDescription fieldName={"description"} />
 
                         <PaddingBox />
                         <ExerciseNotes fieldName={'notes'} />

src/index.css

@@ -11,72 +11,3 @@ code {
 }
 
 
-/*
- *  Hack: this is the copied CSS from https://github.com/megahertz/react-simple-wysiwyg
- *  so that the styles are loaded when loading this in a shadow dom in the django
- *  application.
- */
-.rsw-editor {
-    border: 1px solid #ddd;
-    border-radius: 0.375rem;
-    display: flex;
-    flex-direction: column;
-    min-height: 100px;
-    overflow: hidden;
-}
-
-.rsw-ce {
-    flex: 1 0 auto;
-    outline: none;
-    padding: 0.5rem;
-}
-
-.rsw-ce[contentEditable='true']:empty:not(:focus):before {
-    content: attr(placeholder);
-    color: grey;
-}
-
-.rsw-html {
-    background: transparent;
-    border: none;
-    font-family: monospace, 'Courier New';
-}
-
-.rsw-separator {
-    align-self: stretch;
-    border-right: 1px solid #ddd;
-    display: flex;
-    margin: 0 3px;
-}
-
-.rsw-dd {
-    box-sizing: border-box;
-    outline: none;
-}
-
-.rsw-btn {
-    background: transparent;
-    border: 0;
-    cursor: pointer;
-    color: #222;
-    font-size: 1em;
-    height: 2em;
-    outline: none;
-    padding: 0;
-    width: 2em;
-}
-
-.rsw-btn:hover {
-    background: #eaeaea;
-}
-
-.rsw-btn[data-active='true'] {
-    background: #e0e0e0;
-}
-
-.rsw-toolbar {
-    align-items: center;
-    background-color: #f5f5f5;
-    border-bottom: 1px solid #ddd;
-    display: flex;
-}