Edit static pages

package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@babel/core": "7.9.0",
     "@babel/preset-typescript": "^7.10.1",
+    "@ckeditor/ckeditor5-build-classic": "^23.1.0",
+    "@ckeditor/ckeditor5-react": "^3.0.0",
     "@date-io/moment": "^1.3.13",
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.9.1",

src/components/confirm.tsx

@@ -35,8 +35,8 @@ export function Confirm({ children, title, content, onConfirm, onCancel }: Confi
                     <DialogContentText>{ content || t('confirmation') }</DialogContentText>
                 </DialogContent>
                 <DialogActions>
+                    <Button color="primary" variant="contained" autoFocus onClick={ handleConfirm }>{ t('confirm') }</Button>
                     <Button onClick={ handleCancel }>{ t('cancel') }</Button>
-                    <Button color="primary" autoFocus onClick={ handleConfirm }>{ t('confirm') }</Button>
                 </DialogActions>
             </Dialog>,
             document.getElementById("modals") as Element,

src/field/ckeditor.tsx

@@ -0,0 +1,23 @@
+import { FieldProps } from "formik";
+
+// @ts-ignore
+import { CKEditor } from '@ckeditor/ckeditor5-react';
+// @ts-ignore
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import { FormControl, FormControlLabel, FormControlProps, FormLabel, TextFieldProps } from "@material-ui/core";
+import React from "react";
+
+export type CKEditorFieldProps = FieldProps & FormControlProps & { label?: string };
+
+export function CKEditorField({ field, form, error, label, ...props }: CKEditorFieldProps) {
+    const handleChange = (_: unknown, editor: any) => {
+        const data = editor.getData();
+        form.setFieldValue(field.name, data);
+        form.setFieldTouched(field.name);
+    }
+
+    return <FormControl { ...props }>
+        <FormLabel style={{ marginBottom: "0.5rem" }}>{ label }</FormLabel>
+        <CKEditor data={ field.value } editor={ ClassicEditor } onChange={ handleChange }/>
+    </FormControl>
+}

src/management/edition/list.tsx

@@ -10,7 +10,7 @@ import { Edition } from "@/data/edition";
 import { Pencil } from "mdi-material-ui";
 import { Management } from "../main";
 import { createPortal } from "react-dom";
-import { CreateStaticPageDialog } from "@/management/page/create";
+import { EditStaticPageDialog } from "@/management/page/create";
 
 export type EditionDetailsProps = {
     edition: string;

src/management/page/edit.tsx

@@ -9,11 +9,12 @@ import { Cancel } from "mdi-material-ui";
 import { useSpacing } from "@/styles";
 import { default as StaticPage } from "@/data/page";
 
-export type CreateStaticPageDialogProps = {
+export type EditStaticPageDialogProps = {
     onSave?: (page: StaticPage) => void;
+    page?: StaticPage;
 } & DialogProps;
 
-export function CreateStaticPageDialog({ onSave, ...props }: CreateStaticPageDialogProps) {
+export function EditStaticPageDialog({ onSave, page, ...props }: EditStaticPageDialogProps) {
     const { t } = useTranslation("management");
     const spacing = useSpacing(3);
 
@@ -21,10 +22,14 @@ export function CreateStaticPageDialog({ onSave, ...props }: CreateStaticPageDia
         onSave?.(staticPageFormValuesTransformer.reverseTransform(values));
     };
 
+    const initialValues = page
+        ? staticPageFormValuesTransformer.transform(page)
+        : initialStaticPageFormValues;
+
     return <Dialog { ...props } maxWidth="lg">
-        <Formik initialValues={ initialStaticPageFormValues } onSubmit={ handleSubmit }>
+        <Formik initialValues={ initialValues } onSubmit={ handleSubmit }>
             <Form className={ spacing.vertical }>
-                <DialogTitle>{ t("page.create.title") }</DialogTitle>
+                <DialogTitle>{ t(page ? "page.edit.title" : "page.create.title") }</DialogTitle>
                 <DialogContent>
                     <StaticPageForm />
                 </DialogContent>
@@ -38,3 +43,4 @@ export function CreateStaticPageDialog({ onSave, ...props }: CreateStaticPageDia
         </Formik>
     </Dialog>
 }
+

src/management/page/form.tsx

@@ -6,6 +6,7 @@ import { TextField as TextFieldFormik } from "formik-material-ui";
 import { Typography } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 import { useSpacing } from "@/styles";
+import { CKEditorField } from "@/field/ckeditor";
 
 export type StaticPageFormValues = StaticPage;
 
@@ -33,7 +34,7 @@ export function StaticPageForm() {
         <Field label={ t("translation:language.pl") } name="title.pl" fullWidth component={ TextFieldFormik }/>
         <Field label={ t("translation:language.en") } name="title.en" fullWidth component={ TextFieldFormik }/>
         <Typography variant="subtitle2">{ t("page.field.content") }</Typography>
-        <Field label={ t("translation:language.pl") } name="content.pl" fullWidth component={ TextFieldFormik }/>
-        <Field label={ t("translation:language.en") } name="content.en" fullWidth component={ TextFieldFormik }/>
+        <Field label={ t("translation:language.pl") } name="content.pl" fullWidth component={ CKEditorField }/>
+        <Field label={ t("translation:language.en") } name="content.en" fullWidth component={ CKEditorField }/>
     </div>
 }

src/management/page/list.tsx

@@ -13,9 +13,9 @@ import { encapsulate, one } from "@/helpers";
 import { Actions } from "@/components";
 import { useSpacing } from "@/styles";
 import { useHistory } from "react-router-dom";
-import { Add } from "@material-ui/icons";
+import { Add, Edit } from "@material-ui/icons";
 import { createPortal } from "react-dom";
-import { CreateStaticPageDialog } from "@/management/page/create";
+import { EditStaticPageDialog } from "@/management/page/edit";
 import { Confirm } from "@/components/confirm";
 
 export const StaticPageManagement = () => {
@@ -29,6 +29,26 @@ export const StaticPageManagement = () => {
 
     useEffect(updatePageList, []);
 
+    const EditStaticPageAction = ({ page }: { page: StaticPage }) => {
+        const [ open, setOpen ] = useState<boolean>(false);
+
+        const handlePageCreation = async (page: StaticPage) => {
+            await api.page.save(page);
+            setOpen(false);
+            updatePageList();
+        }
+
+        return <>
+            <Tooltip title={ t("actions.edit") as any }>
+                <IconButton onClick={ () => setOpen(true) }><Edit /></IconButton>
+            </Tooltip>
+            { open && createPortal(
+                <EditStaticPageDialog open={ open } onSave={ handlePageCreation } page={ page } onClose={ () => setOpen(false) }/>,
+                document.getElementById("modals") as Element
+            ) }
+        </>
+    }
+
     const CreateStaticPageAction = () => {
         const [ open, setOpen ] = useState<boolean>(false);
 
@@ -41,7 +61,7 @@ export const StaticPageManagement = () => {
         return <>
             <Button variant="contained" color="primary" startIcon={ <Add /> } onClick={ () => setOpen(true) }>{ t("create") }</Button>
             { createPortal(
-                <CreateStaticPageDialog open={ open } onSave={ handlePageCreation } onClose={ () => setOpen(false) }/>,
+                <EditStaticPageDialog open={ open } onSave={ handlePageCreation } onClose={ () => setOpen(false) }/>,
                 document.getElementById("modals") as Element
             ) }
         </>
@@ -85,6 +105,7 @@ export const StaticPageManagement = () => {
         {
             title: t("actions.label"),
             render: page => <Actions style={{ margin: "-1rem" }} spacing={ 0 }>
+                <EditStaticPageAction page={ page } />
                 <DeleteStaticPageAction page={ page } />
                 <PreviewStaticPageAction page={ page } />
             </Actions>,

translations/management.pl.yaml

@@ -9,6 +9,7 @@ actions:
   label: Akcje
   preview: Podgląd
   delete: Usuń
+  edit: Edytuj
 
 edition:
   index:
@@ -28,3 +29,5 @@ page:
     slug: Adres
   create:
     title: Utwórz stronę statyczną
+  edit:
+    title: Zmień stronę statyczną

yarn.lock

@@ -988,6 +988,18 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@ckeditor/ckeditor5-build-classic@^23.1.0":
+  version "23.1.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-23.1.0.tgz#b358bd9c266727cd1504d16fb069ada43694e2e5"
+  integrity sha512-wqJZ6yuqm48NoiciRcfs+t73YOfIKovJIiLSHf0yB2I3Mc+bL6iNhwwyJ3b6D/22IgYEXTpc6PiwsYFbGFnq2Q==
+
+"@ckeditor/ckeditor5-react@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-3.0.0.tgz#05a1bdd7b26a8c1df6fd734376ea84e394d6ab47"
+  integrity sha512-kqoD0rbGeUp7CjYBtKcwXVVSWO/VL1QsoTyeGbFyoMHmkM96fBj0TI0Xs2kFqKkeiICtAnwvul3GVNWbIlK/Tw==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"