Merge pull request #395 from mirumee/fix/rich-text-error

Handle rich text editor content error

CHANGELOG.md

@@ -36,6 +36,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Remove PO files from repo and update translations #409 by @dominik-zeglen
 - Add optional chaining and explicitely return "Not found" page - #408 by @dominik-zeglen
 - Do not store errors in form component - #410 by @dominik-zeglen
+- Handle rich text editor content error - #395 by @dominik-zeglen
 
 ## 2.0.0
 

locale/defaultMessages.json

@@ -1267,6 +1267,10 @@
     "context": "button",
     "string": "Add or Edit Link"
   },
+  "src_dot_components_dot_RichTextEditor_dot_286109898": {
+    "context": "rich text error",
+    "string": "Invalid content"
+  },
   "src_dot_components_dot_RichTextEditor_dot_2925475978": {
     "string": "URL Linked"
   },

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,8 @@ import isEqual from "lodash-es/isEqual";
 import React from "react";
 
 import { ChangeEvent } from "@saleor/hooks/useForm";
+import ErrorBoundary from "react-error-boundary";
+import { CreateCSSProperties } from "@material-ui/styles/withStyles";
 import BoldIcon from "../../icons/BoldIcon";
 import HeaderTwo from "../../icons/HeaderTwo";
 import HeaderThree from "../../icons/HeaderThree";
@@ -38,7 +41,17 @@ export interface RichTextEditorProps {
 }
 
 const useStyles = makeStyles(
-  theme => ({
+  theme => {
+    const editorContainer: CreateCSSProperties = {
+      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 +106,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 +198,8 @@ const useStyles = makeStyles(
       smallIcon: {
         marginLeft: 10
       }
-  }),
+    };
+  },
   { name: "RichTextEditor" }
 );
 
@@ -226,6 +236,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={
@@ -269,15 +291,9 @@ const RichTextEditor: React.FC<RichTextEditorProps> = props => {
                 source: LinkSource,
                 type: ENTITY_TYPE.LINK
               }
-            // {
-            //   attributes: ["href"],
-            //   decorator: ImageEntity,
-            //   icon: <ImageIcon />,
-            //   source: ImageSource,
-            //   type: ENTITY_TYPE.IMAGE
-            // }
             ]}
           />
+        </ErrorBoundary>
       </div>
       {helperText && (
         <Typography