Add rich text editor to pages

src/collections/components/CollectionDetailsPage/form.tsx

@@ -3,6 +3,7 @@ import { CollectionDetails_collection } from "@saleor/collections/types/Collecti
 import { MetadataFormData } from "@saleor/components/Metadata";
 import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
 import useForm, { FormChange } from "@saleor/hooks/useForm";
+import getPublicationData from "@saleor/utils/data/getPublicationData";
 import handleFormSubmit from "@saleor/utils/handlers/handleFormSubmit";
 import { mapMetadataItemToInput } from "@saleor/utils/maps";
 import getMetadata from "@saleor/utils/metadata/getMetadata";
@@ -89,7 +90,7 @@ function useCollectionUpdateForm(
   const getSubmitData = (): CollectionUpdateData => ({
     ...getData(),
     ...getMetadata(form.data, isMetadataModified, isPrivateMetadataModified),
-    isPublished: form.data.isPublished || !!form.data.publicationDate
+    ...getPublicationData(form.data)
   });
 
   const submit = () => handleFormSubmit(getSubmitData(), onSubmit, setChanged);

src/collections/views/CollectionCreate.tsx

@@ -2,6 +2,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+import getPublicationData from "@saleor/utils/data/getPublicationData";
 import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
   useMetadataUpdate,
@@ -11,9 +12,8 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { CollectionCreateInput } from "../../types/globalTypes";
-import CollectionCreatePage, {
+import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage";
-  CollectionCreatePageFormData
+import { CollectionCreateData } from "../components/CollectionCreatePage/form";
-} from "../components/CollectionCreatePage/CollectionCreatePage";
 import { useCollectionCreateMutation } from "../mutations";
 import { collectionListUrl, collectionUrl } from "../urls";
 
@@ -47,15 +47,7 @@ export const CollectionCreate: React.FC = () => {
     }
   });
 
-  const getPublicationData = ({
+  const handleCreate = async (formData: CollectionCreateData) => {
-    publicationDate,
-    isPublished
-  }: CollectionCreatePageFormData) => ({
-    isPublished: !!publicationDate || isPublished,
-    publicationDate: publicationDate || null
-  });
-
-  const handleCreate = async (formData: CollectionCreatePageFormData) => {
     const result = await createCollection({
       variables: {
         input: {

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -2,9 +2,8 @@ import AppHeader from "@saleor/components/AppHeader";
 import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
-import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
-import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
+import Metadata from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import SeoForm from "@saleor/components/SeoForm";
@@ -13,30 +12,12 @@ import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { sectionNames } from "@saleor/intl";
-import { mapMetadataItemToInput } from "@saleor/utils/maps";
-import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
-import {
-  ContentState,
-  convertFromRaw,
-  convertToRaw,
-  RawDraftContentState
-} from "draft-js";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { maybe } from "../../../misc";
 import { PageDetails_page } from "../../types/PageDetails";
 import PageInfo from "../PageInfo";
-
+import PageForm, { PageData } from "./form";
-export interface PageDetailsPageFormData extends MetadataFormData {
-  content: RawDraftContentState;
-  isPublished: boolean;
-  publicationDate: string;
-  seoDescription: string;
-  seoTitle: string;
-  slug: string;
-  title: string;
-}
 
 export interface PageDetailsPageProps {
   disabled: boolean;
@@ -46,7 +27,7 @@ export interface PageDetailsPageProps {
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onRemove: () => void;
-  onSubmit: (data: PageDetailsPageFormData) => SubmitPromise;
+  onSubmit: (data: PageData) => SubmitPromise;
 }
 
 const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
@@ -60,140 +41,94 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
 }) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
-  const {
-    isMetadataModified,
-    isPrivateMetadataModified,
-    makeChangeHandler: makeMetadataChangeHandler
-  } = useMetadataChangeTrigger();
 
   const pageExists = page !== null;
 
-  const initialForm: PageDetailsPageFormData = {
-    content: maybe(
-      () => JSON.parse(page.contentJson),
-      convertToRaw(ContentState.createFromText(""))
-    ),
-    isPublished: page?.isPublished,
-    metadata: pageExists ? page?.metadata?.map(mapMetadataItemToInput) : [],
-    privateMetadata: pageExists
-      ? page?.privateMetadata?.map(mapMetadataItemToInput)
-      : [],
-    publicationDate: page?.publicationDate || "",
-    seoDescription: page?.seoDescription || "",
-    seoTitle: page?.seoTitle || "",
-    slug: page?.slug || "",
-    title: page?.title || ""
-  };
-
-  const handleSubmit = (data: PageDetailsPageFormData) => {
-    const metadata = isMetadataModified ? data.metadata : undefined;
-    const privateMetadata = isPrivateMetadataModified
-      ? data.privateMetadata
-      : undefined;
-
-    return onSubmit({
-      ...data,
-      isPublished: data.isPublished || !!data.publicationDate,
-      metadata,
-      privateMetadata
-    });
-  };
-
   return (
-    <Form initial={initialForm} onSubmit={handleSubmit}>
+    <PageForm page={page} onSubmit={onSubmit}>
-      {({ change, data, hasChanged, submit }) => {
+      {({ change, data, handlers, hasChanged, submit }) => (
-        const changeMetadata = makeMetadataChangeHandler(change);
+        <Container>
-
+          <AppHeader onBack={onBack}>
-        return (
+            {intl.formatMessage(sectionNames.pages)}
-          <Container>
+          </AppHeader>
-            <AppHeader onBack={onBack}>
+          <PageHeader
-              {intl.formatMessage(sectionNames.pages)}
+            title={
-            </AppHeader>
+              !pageExists
-            <PageHeader
+                ? intl.formatMessage({
-              title={
+                    defaultMessage: "Create Page",
-                !pageExists
+                    description: "page header"
-                  ? intl.formatMessage({
+                  })
-                      defaultMessage: "Create Page",
+                : page?.title
-                      description: "page header"
+            }
-                    })
+          />
-                  : maybe(() => page.title)
+          <Grid>
-              }
+            <div>
-            />
+              <PageInfo
-            <Grid>
+                data={data}
-              <div>
+                disabled={disabled}
-                <PageInfo
+                errors={errors}
-                  data={data}
+                onChange={change}
-                  disabled={disabled}
+                onContentChange={handlers.changeContent}
-                  errors={errors}
+              />
-                  page={page}
+              <CardSpacer />
-                  onChange={change}
+              <SeoForm
-                />
+                errors={errors}
-                <CardSpacer />
+                allowEmptySlug={!pageExists}
-                <SeoForm
+                description={data.seoDescription}
-                  errors={errors}
+                disabled={disabled}
-                  allowEmptySlug={!pageExists}
+                descriptionPlaceholder={""} // TODO: Cast description to string and trim it
-                  description={data.seoDescription}
+                onChange={change}
-                  disabled={disabled}
+                slug={data.slug}
-                  descriptionPlaceholder={maybe(
+                slugPlaceholder={data.title}
-                    () =>
+                title={data.seoTitle}
-                      convertFromRaw(data.content)
+                titlePlaceholder={data.title}
-                        .getPlainText()
+                helperText={intl.formatMessage({
-                        .slice(0, 300),
+                  defaultMessage:
-                    ""
+                    "Add search engine title and description to make this page easier to find"
-                  )}
+                })}
-                  onChange={change}
+              />
-                  slug={data.slug}
+              <CardSpacer />
-                  slugPlaceholder={data.title}
+              <Metadata data={data} onChange={handlers.changeMetadata} />
-                  title={data.seoTitle}
+            </div>
-                  titlePlaceholder={data.title}
+            <div>
-                  helperText={intl.formatMessage({
+              <CardSpacer />
-                    defaultMessage:
+              <VisibilityCard
-                      "Add search engine title and description to make this page easier to find"
+                data={data}
-                  })}
+                errors={errors}
-                />
+                disabled={disabled}
-                <CardSpacer />
+                messages={{
-                <Metadata data={data} onChange={changeMetadata} />
+                  hiddenLabel: intl.formatMessage({
-              </div>
+                    defaultMessage: "Hidden",
-              <div>
+                    description: "page label"
-                <CardSpacer />
+                  }),
-                <VisibilityCard
+                  hiddenSecondLabel: intl.formatMessage(
-                  data={data}
+                    {
-                  errors={errors}
+                      defaultMessage: "will be visible from {date}",
-                  disabled={disabled}
+                      description: "page"
-                  messages={{
+                    },
-                    hiddenLabel: intl.formatMessage({
+                    {
-                      defaultMessage: "Hidden",
+                      date: localizeDate(data.publicationDate, "L")
-                      description: "page label"
+                    }
-                    }),
+                  ),
-                    hiddenSecondLabel: intl.formatMessage(
+                  visibleLabel: intl.formatMessage({
-                      {
+                    defaultMessage: "Visible",
-                        defaultMessage: "will be visible from {date}",
+                    description: "page label"
-                        description: "page"
+                  })
-                      },
+                }}
-                      {
+                onChange={change}
-                        date: localizeDate(data.publicationDate, "L")
+              />
-                      }
+            </div>
-                    ),
+          </Grid>
-                    visibleLabel: intl.formatMessage({
+          <SaveButtonBar
-                      defaultMessage: "Visible",
+            disabled={disabled || !hasChanged}
-                      description: "page label"
+            state={saveButtonBarState}
-                    })
+            onCancel={onBack}
-                  }}
+            onDelete={page === null ? undefined : onRemove}
-                  onChange={change}
+            onSave={submit}
-                />
+          />
-              </div>
+        </Container>
-            </Grid>
+      )}
-            <SaveButtonBar
+    </PageForm>
-              disabled={disabled || !hasChanged}
-              state={saveButtonBarState}
-              onCancel={onBack}
-              onDelete={page === null ? undefined : onRemove}
-              onSave={submit}
-            />
-          </Container>
-        );
-      }}
-    </Form>
   );
 };
 PageDetailsPage.displayName = "PageDetailsPage";

src/pages/components/PageDetailsPage/form.tsx

@@ -0,0 +1,118 @@
+import { OutputData } from "@editorjs/editorjs";
+import { MetadataFormData } from "@saleor/components/Metadata";
+import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
+import useForm, { FormChange } from "@saleor/hooks/useForm";
+import { PageDetails_page } from "@saleor/pages/types/PageDetails";
+import getPublicationData from "@saleor/utils/data/getPublicationData";
+import handleFormSubmit from "@saleor/utils/handlers/handleFormSubmit";
+import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import getMetadata from "@saleor/utils/metadata/getMetadata";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
+import useRichText from "@saleor/utils/richText/useRichText";
+import React from "react";
+
+export interface PageFormData extends MetadataFormData {
+  isPublished: boolean;
+  publicationDate: string;
+  seoDescription: string;
+  seoTitle: string;
+  slug: string;
+  title: string;
+}
+export interface PageData extends PageFormData {
+  content: OutputData;
+}
+
+interface PageUpdateHandlers {
+  changeMetadata: FormChange;
+  changeContent: RichTextEditorChange;
+}
+export interface UsePageUpdateFormResult {
+  change: FormChange;
+  data: PageData;
+  handlers: PageUpdateHandlers;
+  hasChanged: boolean;
+  submit: () => void;
+}
+
+export interface PageFormProps {
+  children: (props: UsePageUpdateFormResult) => React.ReactNode;
+  page: PageDetails_page;
+  onSubmit: (data: PageData) => Promise<any[]>;
+}
+
+function usePageForm(
+  page: PageDetails_page,
+  onSubmit: (data: PageData) => Promise<any[]>
+): UsePageUpdateFormResult {
+  const [changed, setChanged] = React.useState(false);
+  const triggerChange = () => setChanged(true);
+
+  const pageExists = page !== null;
+
+  const form = useForm<PageFormData>({
+    isPublished: page?.isPublished,
+    metadata: pageExists ? page?.metadata?.map(mapMetadataItemToInput) : [],
+    privateMetadata: pageExists
+      ? page?.privateMetadata?.map(mapMetadataItemToInput)
+      : [],
+    publicationDate: page?.publicationDate || "",
+    seoDescription: page?.seoDescription || "",
+    seoTitle: page?.seoTitle || "",
+    slug: page?.slug || "",
+    title: page?.title || ""
+  });
+  const [content, changeContent] = useRichText({
+    initial: pageExists ? page?.contentJson : null,
+    triggerChange
+  });
+
+  const {
+    isMetadataModified,
+    isPrivateMetadataModified,
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
+  const handleChange: FormChange = (event, cb) => {
+    form.change(event, cb);
+    triggerChange();
+  };
+  const changeMetadata = makeMetadataChangeHandler(handleChange);
+
+  // Need to make it function to always have content.current up to date
+  const getData = (): PageData => ({
+    ...form.data,
+    content: content.current
+  });
+
+  const getSubmitData = (): PageData => ({
+    ...getData(),
+    ...getMetadata(form.data, isMetadataModified, isPrivateMetadataModified),
+    ...getPublicationData(form.data)
+  });
+
+  const submit = () =>
+    pageExists
+      ? handleFormSubmit(getSubmitData(), onSubmit, setChanged)
+      : onSubmit(getSubmitData());
+
+  return {
+    change: handleChange,
+    data: getData(),
+    handlers: {
+      changeContent,
+      changeMetadata
+    },
+    hasChanged: changed,
+    submit
+  };
+}
+
+const PageForm: React.FC<PageFormProps> = ({ children, page, onSubmit }) => {
+  const props = usePageForm(page, onSubmit);
+
+  return <form onSubmit={props.submit}>{children(props)}</form>;
+};
+
+PageForm.displayName = "PageForm";
+export default PageForm;

src/pages/components/PageInfo/PageInfo.tsx

@@ -4,7 +4,9 @@ import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
-import RichTextEditor from "@saleor/components/RichTextEditor";
+import RichTextEditor, {
+  RichTextEditorChange
+} from "@saleor/components/RichTextEditor";
 import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
 import { commonMessages } from "@saleor/intl";
 import { getFormErrors } from "@saleor/utils/errors";
@@ -12,16 +14,14 @@ import getPageErrorMessage from "@saleor/utils/errors/page";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { maybe } from "../../../misc";
+import { PageData } from "../PageDetailsPage/form";
-import { PageDetails_page } from "../../types/PageDetails";
-import { PageDetailsPageFormData } from "../PageDetailsPage";
 
 export interface PageInfoProps {
-  data: PageDetailsPageFormData;
+  data: PageData;
   disabled: boolean;
   errors: PageErrorFragment[];
-  page: PageDetails_page;
   onChange: (event: React.ChangeEvent<any>) => void;
+  onContentChange: RichTextEditorChange;
 }
 
 const useStyles = makeStyles(
@@ -34,7 +34,7 @@ const useStyles = makeStyles(
 );
 
 const PageInfo: React.FC<PageInfoProps> = props => {
-  const { data, disabled, errors, page, onChange } = props;
+  const { data, disabled, errors, onChange, onContentChange } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
@@ -56,22 +56,22 @@ const PageInfo: React.FC<PageInfoProps> = props => {
             defaultMessage: "Title",
             description: "page title"
           })}
-          name={"title" as keyof PageDetailsPageFormData}
+          name={"title" as keyof PageData}
           value={data.title}
           onChange={onChange}
         />
         <FormSpacer />
         <RichTextEditor
+          data={data.content}
           disabled={disabled}
           error={!!formErrors.contentJson}
           helperText={getPageErrorMessage(formErrors.contentJson, intl)}
-          initial={maybe(() => JSON.parse(page.contentJson))}
           label={intl.formatMessage({
             defaultMessage: "Content",
             description: "page content"
           })}
-          name={"content" as keyof PageDetailsPageFormData}
+          name={"content" as keyof PageData}
-          onChange={onChange}
+          onChange={onContentChange}
         />
       </CardContent>
     </Card>

src/pages/mutations.ts

@@ -22,6 +22,7 @@ const pageCreate = gql`
     pageCreate(input: $input) {
       errors: pageErrors {
         ...PageErrorFragment
+        message
       }
       page {
         ...PageDetailsFragment

src/pages/views/PageCreate.tsx

@@ -9,9 +9,8 @@ import {
 import React from "react";
 import { useIntl } from "react-intl";
 
-import PageDetailsPage, {
+import PageDetailsPage from "../components/PageDetailsPage";
-  PageDetailsPageFormData
+import { PageData } from "../components/PageDetailsPage/form";
-} from "../components/PageDetailsPage";
 import { TypedPageCreate } from "../mutations";
 import { PageCreate as PageCreateData } from "../types/PageCreate";
 import { pageListUrl, pageUrl } from "../urls";
@@ -42,7 +41,7 @@ export const PageCreate: React.FC<PageCreateProps> = () => {
   return (
     <TypedPageCreate onCompleted={handlePageCreate}>
       {(pageCreate, pageCreateOpts) => {
-        const handleCreate = async (formData: PageDetailsPageFormData) => {
+        const handleCreate = async (formData: PageData) => {
           const result = await pageCreate({
             variables: {
               input: {

src/utils/data/getPublicationData.ts

@@ -0,0 +1,16 @@
+interface PublicationData {
+  publicationDate: string;
+  isPublished: boolean;
+}
+
+function getPublicationData({
+  publicationDate,
+  isPublished
+}: PublicationData): PublicationData {
+  return {
+    isPublished: !!publicationDate || isPublished,
+    publicationDate: publicationDate || null
+  };
+}
+
+export default getPublicationData;

src/utils/richText/useRichText.test.ts

@@ -39,6 +39,7 @@ describe("useRichText", () => {
     const triggerChange = jest.fn();
     const hook = renderHook(() =>
       useRichText({
+        initial: null,
         triggerChange
       })
     );

src/utils/richText/useRichText.ts

@@ -1,6 +1,6 @@
 import { OutputData } from "@editorjs/editorjs";
 import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
-import { MutableRefObject, useEffect, useRef } from "react";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
 
 function useRichText(opts: {
   initial: string | null;
@@ -9,9 +9,11 @@ function useRichText(opts: {
   const data = useRef<OutputData>(
     opts.initial === null ? { blocks: [] } : undefined
   );
+  const [, setLoaded] = useState(false);
   useEffect(() => {
     try {
       data.current = JSON.parse(opts.initial);
+      setLoaded(true);
     } catch {
       data.current = undefined;
     }