From 4b987c86ed1865c6305aca25f784b085a14673df Mon Sep 17 00:00:00 2001
From: Pascal Birchler <pascalb@google.com>
Date: Fri, 6 Dec 2024 11:26:50 +0100
Subject: [PATCH] Prevent blurhash crashes (#13866)

---
 .../canvas/renderResourcePlaceholder.js       | 14 +++++-
 .../src/components/hideOnError.tsx            | 50 +++++++++++++++++++
 .../panes/media/common/mediaElement.js        | 15 +++---
 packages/story-editor/tsconfig.json           |  1 +
 4 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 packages/story-editor/src/components/hideOnError.tsx

diff --git a/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js b/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js
index d9df42e060a1..b4843bd25358 100644
--- a/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js
+++ b/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js
@@ -20,6 +20,11 @@
 import styled, { css } from 'styled-components';
 import { Blurhash } from 'react-blurhash';
 
+/**
+ * Internal dependencies
+ */
+import { HideOnError } from '../hideOnError';
+
 const placeholderStyles = css`
   position: absolute !important;
   top: 0;
@@ -40,7 +45,14 @@ const BaseColorContainer = styled.div`
 function renderResourcePlaceholder({ blurHash, baseColor }) {
   if (blurHash) {
     return (
-      <BlurhashContainer hash={blurHash} punch={1} height="100%" width="100%" />
+      <HideOnError>
+        <BlurhashContainer
+          hash={blurHash}
+          punch={1}
+          height="100%"
+          width="100%"
+        />
+      </HideOnError>
     );
   }
 
diff --git a/packages/story-editor/src/components/hideOnError.tsx b/packages/story-editor/src/components/hideOnError.tsx
new file mode 100644
index 000000000000..45d2db0778bd
--- /dev/null
+++ b/packages/story-editor/src/components/hideOnError.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import type { PropsWithChildren } from 'react';
+import { Component } from '@googleforcreators/react';
+
+interface HideOnErrorState {
+  error: Error | null;
+}
+
+export class HideOnError extends Component<PropsWithChildren<unknown>> {
+  state: HideOnErrorState;
+
+  constructor(props: PropsWithChildren<unknown>) {
+    super(props);
+
+    this.state = {
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    const { error } = this.state;
+    if (!error) {
+      return this.props.children;
+    }
+
+    return null;
+  }
+}
diff --git a/packages/story-editor/src/components/library/panes/media/common/mediaElement.js b/packages/story-editor/src/components/library/panes/media/common/mediaElement.js
index a9a734553c51..d6074da922f2 100644
--- a/packages/story-editor/src/components/library/panes/media/common/mediaElement.js
+++ b/packages/story-editor/src/components/library/panes/media/common/mediaElement.js
@@ -38,6 +38,7 @@ import DropDownMenu from '../local/dropDownMenu';
 import { ContentType, useLocalMedia } from '../../../../../app/media';
 import Tooltip from '../../../../tooltip';
 import { noop } from '../../../../../utils/noop';
+import { HideOnError } from '../../../../hideOnError';
 import Attribution from './attribution';
 import InnerElement from './innerElement';
 import InsertionMenu from './insertionMenu';
@@ -211,12 +212,14 @@ function Element({
         />
         {attribution}
         {isPlaceholder && blurHash && (
-          <BlurhashContainer
-            hash={blurHash}
-            width={width}
-            height={height}
-            punch={1}
-          />
+          <HideOnError>
+            <BlurhashContainer
+              hash={blurHash}
+              width={width}
+              height={height}
+              punch={1}
+            />
+          </HideOnError>
         )}
         {(!src ||
           isCurrentResourceProcessing(resourceId) ||
diff --git a/packages/story-editor/tsconfig.json b/packages/story-editor/tsconfig.json
index 8df5fd9d92a1..6a85a582283b 100644
--- a/packages/story-editor/tsconfig.json
+++ b/packages/story-editor/tsconfig.json
@@ -47,6 +47,7 @@
     "src/app/pageDataUrls",
     "src/app/story",
     "src/app/taxonomy",
+    "src/components/hideOnError.tsx",
     "src/components/library/panes/text/textPresets.ts",
     "src/components/canvas/*.ts",
     "src/components/canvas/utils/*.ts",