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

@@ -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}

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}

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();
-              const savedData = await api.saver.save();
+            onChange(savedData);
-              onChange(savedData);
-            }
           },
           onReady: () => {
             // FIXME: This throws an error and is not working

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
                     )}