From df7ac2dd458c9a9ad84bb0f9b6ac2b8842e8a16d Mon Sep 17 00:00:00 2001
From: Jakub Majorek <majorek.jakub@gmail.com>
Date: Thu, 1 Jul 2021 13:23:36 +0200
Subject: [PATCH] Fix rich text editor content not being saved (#1202)

* Fix rich text editor content not being saved

* Add a temporary workaround to EditorJS issue
---
 src/components/Attributes/AttributeRow.tsx                  | 5 ++++-
 src/components/Attributes/Attributes.tsx                    | 3 +++
 src/components/RichTextEditor/RichTextEditor.tsx            | 6 ++----
 .../components/ProductVariantPage/ProductVariantPage.tsx    | 2 ++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Attributes/AttributeRow.tsx b/src/components/Attributes/AttributeRow.tsx
index f684c1ecc..dfd47fdac 100644
--- a/src/components/Attributes/AttributeRow.tsx
+++ b/src/components/Attributes/AttributeRow.tsx
@@ -70,6 +70,7 @@ interface AttributeRowProps extends AttributeRowHandlers {
   disabled: boolean;
   error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment;
   loading: boolean;
+  entityId: string;
 }
 
 const AttributeRow: React.FC<AttributeRowProps> = ({
@@ -85,7 +86,8 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
   onReferencesReorder,
   onChange,
   fetchAttributeValues,
-  fetchMoreAttributeValues
+  fetchMoreAttributeValues,
+  entityId
 }) => {
   const intl = useIntl();
   const classes = useStyles({});
@@ -160,6 +162,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       return (
         <BasicAttributeRow label={attribute.label}>
           <RichTextEditor
+            key={entityId} // temporary workaround, TODO: refactor rich text editor
             name={`attribute:${attribute.label}`}
             disabled={disabled}
             error={!!error}
diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx
index e94b497aa..b74d856b5 100644
--- a/src/components/Attributes/Attributes.tsx
+++ b/src/components/Attributes/Attributes.tsx
@@ -44,6 +44,7 @@ export interface AttributesProps extends AttributeRowHandlers {
     ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment
   >;
   title?: React.ReactNode;
+  entityId?: string;
 }
 
 const useStyles = makeStyles(
@@ -116,6 +117,7 @@ const Attributes: React.FC<AttributesProps> = ({
   attributeValues,
   errors,
   title,
+  entityId = "_defaultId",
   ...props
 }) => {
   const intl = useIntl();
@@ -162,6 +164,7 @@ const Attributes: React.FC<AttributesProps> = ({
                 <React.Fragment key={attribute.id}>
                   {attributeIndex > 0 && <Hr />}
                   <AttributeRow
+                    entityId={entityId}
                     attribute={attribute}
                     attributeValues={attributeValues}
                     error={error}
diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
index f7dc0c52c..83f52608f 100644
--- a/src/components/RichTextEditor/RichTextEditor.tsx
+++ b/src/components/RichTextEditor/RichTextEditor.tsx
@@ -42,10 +42,8 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
           holder: editorContainer.current,
           logLevel: "ERROR" as LogLevels,
           onChange: async api => {
-            if (!api.readOnly) {
-              const savedData = await api.saver.save();
-              onChange(savedData);
-            }
+            const savedData = await api.saver.save();
+            onChange(savedData);
           },
           onReady: () => {
             // FIXME: This throws an error and is not working
diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
index 1c7b5e6cb..322bbc9d7 100644
--- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx
+++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
@@ -227,6 +227,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                 <div>
                   <VariantDetailsChannelsAvailabilityCard variant={variant} />
                   <Attributes
+                    entityId={variant?.id}
                     title={intl.formatMessage(messages.nonSelectionAttributes)}
                     attributes={data.attributes.filter(
                       attribute =>
@@ -248,6 +249,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                   />
                   <CardSpacer />
                   <Attributes
+                    entityId={variant?.id}
                     title={intl.formatMessage(
                       messages.selectionAttributesHeader
                     )}