Fix editorjs error when saving new translation (#4991)

* Fix editorjs error when loading

* Add changeset

* Update test

.changeset/green-ducks-turn.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+An error is no longer raised and visible to the user when saving translations

src/translations/components/TranslationFields/TranslationFields.tsx

@@ -231,13 +231,6 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
                         onDiscard={onDiscard}
                         onSubmit={data => onSubmit(field, data)}
                       />
-                    ) : // FIXME
-                    // For now this is the only way to fix the issue
-                    // of initializing the editor with fetched data.
-                    // Without this the editor doesn't get the saved data
-                    // and is empty
-                    disabled ? (
-                      <Skeleton />
                     ) : (
                       <TranslationFieldsRich
                         resetKey={richTextResetKey}

src/translations/components/TranslationFields/TranslationFieldsRich.tsx

@@ -32,14 +32,13 @@ const TranslationFieldsRich: React.FC<TranslationFieldsRichProps> = ({
   onSubmit,
 }) => {
   const intl = useIntl();
-
   const {
     isReadyForMount,
     handleSubmit,
     defaultValue,
     handleChange,
     editorRef,
-  } = useRichTextSubmit(initial, onSubmit);
+  } = useRichTextSubmit(initial, onSubmit, disabled);
 
   return edit ? (
     <form onSubmit={handleSubmit}>

src/translations/components/TranslationFields/useRichTextSubmit.test.ts

@@ -12,7 +12,9 @@ describe("useRichTextSubmit", () => {
     const getValue = jest.fn(() => textEditorValue);
     (useRichText as jest.Mock).mockImplementation(() => ({ getValue }));
     const submitFn = jest.fn();
-    const { result } = renderHook(() => useRichTextSubmit("initial", submitFn));
+    const { result } = renderHook(() =>
+      useRichTextSubmit("initial", submitFn, false),
+    );
 
     // When
     await result.current.handleSubmit();

src/translations/components/TranslationFields/useRichTextSubmit.ts

@@ -7,19 +7,16 @@ import React from "react";
 export function useRichTextSubmit(
   initial: string,
   onSubmit: (data: OutputData) => SubmitPromise,
+  loading: boolean,
 ) {
   const { setIsDirty, setExitDialogSubmitRef } = useExitFormDialog();
 
-  const {
-    defaultValue,
-    editorRef,
-    isReadyForMount,
-    handleChange,
-    getValue,
-  } = useRichText({
-    initial,
-    triggerChange: () => setIsDirty(true),
-  });
+  const { defaultValue, editorRef, isReadyForMount, handleChange, getValue } =
+    useRichText({
+      initial,
+      loading,
+      triggerChange: () => setIsDirty(true),
+    });
 
   const handleSubmit = React.useCallback(async () => {
     const result = onSubmit(await getValue());
@@ -34,10 +31,10 @@ export function useRichTextSubmit(
     return errors;
   }, [getValue, onSubmit, setIsDirty]);
 
-  React.useEffect(() => setExitDialogSubmitRef(handleSubmit), [
-    handleSubmit,
-    setExitDialogSubmitRef,
-  ]);
+  React.useEffect(
+    () => setExitDialogSubmitRef(handleSubmit),
+    [handleSubmit, setExitDialogSubmitRef],
+  );
 
   return {
     defaultValue,