Add rich text editor to product pages

src/components/RichTextEditor/RichTextEditor.tsx

@@ -74,6 +74,19 @@ const useStyles = makeStyles(
         "& .ce-inline-toolbar__toggler-and-button-wrapper": {
           paddingRight: 0
         },
+        "& .ce-toolbar__actions": {
+          right: 0,
+          top: 0
+        },
+        "& .ce-toolbar__content": {
+          maxWidth: "unset"
+        },
+        "& .ce-toolbar__plus": {
+          left: -9
+        },
+        "& .ce-toolbox.ce-toolbox--opened": {
+          left: 16
+        },
         "& .codex-editor__redactor": {
           marginRight: `${theme.spacing(4)}px !important`,
           paddingBottom: "0 !important"

src/products/components/ProductUpdatePage/form.tsx

@@ -22,6 +22,7 @@ import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/Searc
 import handleFormSubmit from "@saleor/utils/handlers/handleFormSubmit";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import getMetadata from "@saleor/utils/metadata/getMetadata";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import useRichText from "@saleor/utils/richText/useRichText";
 import { diff } from "fast-array-diff";
@@ -143,15 +144,6 @@ const getStocksData = (
   };
 };
 
-const getMetadata = (
-  data: ProductUpdateFormData,
-  isMetadataModified: boolean,
-  isPrivateMetadataModified: boolean
-) => ({
-  metadata: isMetadataModified ? data.metadata : undefined,
-  privateMetadata: isPrivateMetadataModified ? data.privateMetadata : undefined
-});
-
 function useProductUpdateForm(
   product: ProductDetails_product,
   onSubmit: (data: ProductUpdateSubmitData) => SubmitPromise,

src/products/components/ProductVariantPage/form.tsx

@@ -11,6 +11,7 @@ import {
 } from "@saleor/products/utils/data";
 import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
 import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import getMetadata from "@saleor/utils/metadata/getMetadata";
 import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import { diff } from "fast-array-diff";
 import React from "react";
@@ -117,11 +118,6 @@ function useProductVariantUpdateForm(
     stocks.remove(id);
   };
 
-  const metadata = isMetadataModified ? form.data.metadata : undefined;
-  const privateMetadata = isPrivateMetadataModified
-    ? form.data.privateMetadata
-    : undefined;
-
   const dataStocks = stocks.data.map(stock => stock.id);
   const variantStocks = variant?.stocks.map(stock => stock.warehouse.id) || [];
   const stockDiff = diff(variantStocks, dataStocks);
@@ -140,10 +136,9 @@ function useProductVariantUpdateForm(
   };
   const submitData: ProductVariantUpdateSubmitData = {
     ...form.data,
+    ...getMetadata(form.data, isMetadataModified, isPrivateMetadataModified),
     addStocks,
     attributes: attributes.data,
-    metadata,
-    privateMetadata,
     removeStocks: stockDiff.removed,
     updateStocks
   };

src/utils/metadata/getMetadata.ts

@@ -0,0 +1,16 @@
+import { MetadataFormData } from "@saleor/components/Metadata";
+
+function getMetadata(
+  data: MetadataFormData,
+  isMetadataModified: boolean,
+  isPrivateMetadataModified: boolean
+) {
+  return {
+    metadata: isMetadataModified ? data.metadata : undefined,
+    privateMetadata: isPrivateMetadataModified
+      ? data.privateMetadata
+      : undefined
+  };
+}
+
+export default getMetadata;

src/utils/richText/useRichText.ts

@@ -3,7 +3,7 @@ import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
 import { MutableRefObject, useEffect, useRef } from "react";
 
 function useRichText(opts: {
-  initial?: string | null;
+  initial: string | null;
   triggerChange: () => void;
 }): [MutableRefObject<OutputData>, RichTextEditorChange] {
   const data = useRef<OutputData>(