From 28cc74c9548a7f2ab8b6c9a4cdd5f7eda631ec17 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Tue, 3 Nov 2020 17:17:37 +0100
Subject: [PATCH] Add rich text editor to product pages

---
 src/components/RichTextEditor/RichTextEditor.tsx | 13 +++++++++++++
 .../components/ProductUpdatePage/form.tsx        | 10 +---------
 .../components/ProductVariantPage/form.tsx       |  9 ++-------
 src/utils/metadata/getMetadata.ts                | 16 ++++++++++++++++
 src/utils/richText/useRichText.ts                |  2 +-
 5 files changed, 33 insertions(+), 17 deletions(-)
 create mode 100644 src/utils/metadata/getMetadata.ts

diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
index 2eb58bd04..0a5a6de76 100644
--- a/src/components/RichTextEditor/RichTextEditor.tsx
+++ b/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"
diff --git a/src/products/components/ProductUpdatePage/form.tsx b/src/products/components/ProductUpdatePage/form.tsx
index c1f2e8fa2..21e59cd0e 100644
--- a/src/products/components/ProductUpdatePage/form.tsx
+++ b/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,
diff --git a/src/products/components/ProductVariantPage/form.tsx b/src/products/components/ProductVariantPage/form.tsx
index 9d9fc8203..b667c9cb4 100644
--- a/src/products/components/ProductVariantPage/form.tsx
+++ b/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
   };
diff --git a/src/utils/metadata/getMetadata.ts b/src/utils/metadata/getMetadata.ts
new file mode 100644
index 000000000..820f3a766
--- /dev/null
+++ b/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;
diff --git a/src/utils/richText/useRichText.ts b/src/utils/richText/useRichText.ts
index 58613193b..fa51fb74a 100644
--- a/src/utils/richText/useRichText.ts
+++ b/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>(