diff --git a/package.json b/package.json
index 2482de1..51d8da2 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/confirm.tsx b/src/components/confirm.tsx
index 7a8cf42..a384647 100644
--- a/src/components/confirm.tsx
+++ b/src/components/confirm.tsx
@@ -35,8 +35,8 @@ export function Confirm({ children, title, content, onConfirm, onCancel }: Confi
{ content || t('confirmation') }
+
-
,
document.getElementById("modals") as Element,
diff --git a/src/field/ckeditor.tsx b/src/field/ckeditor.tsx
new file mode 100644
index 0000000..07e4ea3
--- /dev/null
+++ b/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
+ { label }
+
+
+}
diff --git a/src/management/edition/list.tsx b/src/management/edition/list.tsx
index 535450b..d718651 100644
--- a/src/management/edition/list.tsx
+++ b/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;
diff --git a/src/management/page/create.tsx b/src/management/page/edit.tsx
similarity index 76%
rename from src/management/page/create.tsx
rename to src/management/page/edit.tsx
index 59c3870..c185e49 100644
--- a/src/management/page/create.tsx
+++ b/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
}
+
diff --git a/src/management/page/form.tsx b/src/management/page/form.tsx
index c0dfb3a..fe28dd6 100644
--- a/src/management/page/form.tsx
+++ b/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() {
{ t("page.field.content") }
-
-
+
+
}
diff --git a/src/management/page/list.tsx b/src/management/page/list.tsx
index 8d21234..4eaf524 100644
--- a/src/management/page/list.tsx
+++ b/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(false);
+
+ const handlePageCreation = async (page: StaticPage) => {
+ await api.page.save(page);
+ setOpen(false);
+ updatePageList();
+ }
+
+ return <>
+
+ setOpen(true) }>
+
+ { open && createPortal(
+ setOpen(false) }/>,
+ document.getElementById("modals") as Element
+ ) }
+ >
+ }
+
const CreateStaticPageAction = () => {
const [ open, setOpen ] = useState(false);
@@ -41,7 +61,7 @@ export const StaticPageManagement = () => {
return <>
} onClick={ () => setOpen(true) }>{ t("create") }
{ createPortal(
- setOpen(false) }/>,
+ setOpen(false) }/>,
document.getElementById("modals") as Element
) }
>
@@ -85,6 +105,7 @@ export const StaticPageManagement = () => {
{
title: t("actions.label"),
render: page =>
+
,
diff --git a/translations/management.pl.yaml b/translations/management.pl.yaml
index 7eb655c..1b9e4ac 100644
--- a/translations/management.pl.yaml
+++ b/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ą
diff --git a/yarn.lock b/yarn.lock
index 5f3d70b..3b7c7b6 100644
--- a/yarn.lock
+++ b/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"