Display error message if invalid content is passed

src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
+import { FormattedMessage } from "react-intl";
 import classNames from "classnames";
 import { RawDraftContentState } from "draft-js";
 import {
@@ -13,6 +14,7 @@ import isEqual from "lodash-es/isEqual";
 import React from "react";
 
 import { ChangeEvent } from "@saleor/hooks/useForm";
+import ErrorBoundary from "react-error-boundary";
 import BoldIcon from "../../icons/BoldIcon";
 import HeaderTwo from "../../icons/HeaderTwo";
 import HeaderThree from "../../icons/HeaderThree";
@@ -38,7 +40,17 @@ export interface RichTextEditorProps {
 }
 
 const useStyles = makeStyles(
-  theme => ({
+  theme => {
+    const editorContainer: React.CSSProperties = {
+      border: `1px ${theme.palette.divider} solid`,
+      borderRadius: 4,
+      padding: "27px 12px 10px",
+      position: "relative",
+      transition: theme.transitions.duration.shortest + "ms"
+    };
+
+    return {
+      editorContainer,
       error: {
         color: theme.palette.error.main
       },
@@ -93,11 +105,7 @@ const useStyles = makeStyles(
             "&:hover": {
               borderColor: theme.palette.primary.main
             },
-          border: `1px ${theme.palette.divider} solid`,
-          borderRadius: 4,
-          padding: "27px 12px 10px",
-          position: "relative",
-          transition: theme.transitions.duration.shortest + "ms"
+            ...editorContainer
           },
           "&-Toolbar": {
             "&Button": {
@@ -189,7 +197,8 @@ const useStyles = makeStyles(
       smallIcon: {
         marginLeft: 10
       }
-  }),
+    };
+  },
   { name: "RichTextEditor" }
 );
 
@@ -226,6 +235,18 @@ const RichTextEditor: React.FC<RichTextEditorProps> = props => {
         <Typography className={classes.label} variant="caption" color="primary">
           {label}
         </Typography>
+        <ErrorBoundary
+          FallbackComponent={() => (
+            <div className={classes.editorContainer}>
+              <Typography color="error">
+                <FormattedMessage
+                  defaultMessage="Invalid content"
+                  description="rich text error"
+                />
+              </Typography>
+            </div>
+          )}
+        >
           <DraftailEditor
             key={JSON.stringify(initial)}
             rawContentState={
@@ -278,6 +299,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = props => {
               // }
             ]}
           />
+        </ErrorBoundary>
       </div>
       {helperText && (
         <Typography

src/storybook/stories/components/RichTextEditor.tsx

@@ -116,4 +116,20 @@ storiesOf("Generics / Rich text editor", module)
       name="content"
       onChange={() => undefined}
     />
+  ))
+  .add("invalid content", () => (
+    <RichTextEditor
+      disabled={false}
+      error={false}
+      helperText={""}
+      initial={
+        {
+          content: "dummy",
+          key2: "this is not valid draftjs content"
+        } as any
+      }
+      label="Content"
+      name="content"
+      onChange={() => undefined}
+    />
   ));