feat: disable showing errors in cells, you can turn on the old bhavio…

…r with shouldShowErrorInCells: false, (#1276)

it will still log the error.

this makes the occasional problems with slate less severe.

packages/editor/src/core/components/Cell/CellErrorGate.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ErrorCell from './ErrorCell';
+
+export const CellErrorGate = class extends React.Component<
+  {
+    children: React.ReactNode;
+    nodeId: string;
+    shouldShowError?: boolean;
+  },
+  { error: Error | null }
+> {
+  state = {
+    error: null,
+  };
+  componentDidCatch(error: Error) {
+    this.setState({ error });
+    console.error(error);
+  }
+
+  reset() {
+    this.setState({ error: null });
+  }
+
+  render() {
+    if (this.state.error && this.props.shouldShowError) {
+      return (
+        <ErrorCell
+          nodeId={this.props.nodeId}
+          error={this.state.error}
+          resetError={this.reset.bind(this)}
+        />
+      );
+    }
+    return this.props.children;
+  }
+};

packages/editor/src/core/components/Cell/ErrorCell/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { useIsEditMode, useRemoveCell, useUiTranslator } from '../../hooks';
 
-const ErrorCell: React.FC<{ nodeId: string; error: Error }> = ({
-  nodeId,
-  error,
-}) => {
+const ErrorCell: React.FC<{
+  nodeId: string;
+  error: Error;
+  resetError?: () => void;
+}> = ({ nodeId, error, resetError }) => {
   const isEditMode = useIsEditMode();
   const removeCell = useRemoveCell(nodeId);
   const { t } = useUiTranslator();
@@ -20,7 +21,12 @@ const ErrorCell: React.FC<{ nodeId: string; error: Error }> = ({
         </dl>
       </small>
       {isEditMode ? (
-        <button onClick={() => removeCell()}>{t('Remove')}</button>
+        <>
+          {resetError ? (
+            <button onClick={() => resetError()}>{t('Reset')}</button>
+          ) : null}
+          <button onClick={() => removeCell()}>{t('Remove')}</button>
+        </>
       ) : null}
     </div>
   );

packages/editor/src/core/components/Cell/index.tsx

@@ -19,34 +19,12 @@ import {
   useScrollToViewEffect,
   useSetDisplayReferenceNodeId,
 } from '../hooks';
-import ErrorCell from './ErrorCell';
+import { CellErrorGate } from './CellErrorGate';
 import Handle from './Handle';
 import Inner from './Inner';
 import MoveActions from './MoveActions';
 import scrollIntoViewWithOffset from './utils/scrollIntoViewWithOffset';
 
-const CellErrorGate = class extends React.Component<
-  {
-    children: React.ReactElement;
-    nodeId: string;
-  },
-  { error: Error | null }
-> {
-  state = {
-    error: null,
-  };
-  componentDidCatch(error: Error) {
-    this.setState({ error });
-  }
-
-  render() {
-    if (this.state.error) {
-      return <ErrorCell nodeId={this.props.nodeId} error={this.state.error} />;
-    }
-    return this.props.children;
-  }
-};
-
 type Props = {
   nodeId: string;
   measureRef?: UseMeasureRef;
@@ -68,7 +46,7 @@ const Cell: React.FC<Props> = ({ nodeId, measureRef }) => {
   const lang = useLang();
   const isPreviewMode = useIsPreviewMode();
   const isResizeMode = useIsResizeMode();
-
+  const shouldShowErrorInCells = useOption('shouldShowErrorInCells');
   const isLayoutMode = useIsLayoutMode();
   const isInsertMode = useIsInsertMode();
   const multiNodesSelected = useAllFocusedNodeIds().length > 1;
@@ -148,7 +126,7 @@ const Cell: React.FC<Props> = ({ nodeId, measureRef }) => {
           boxSizing: 'border-box',
         }}
       >
-        <CellErrorGate nodeId={nodeId}>
+        <CellErrorGate nodeId={nodeId} shouldShowError={shouldShowErrorInCells}>
           <Inner nodeId={nodeId} />
         </CellErrorGate>
       </div>

packages/editor/src/core/defaultOptions.ts

@@ -30,9 +30,9 @@ export const DEFAULT_OPTIONS: Required<Options> = {
   showMoveButtonsInBottomToolbar: true,
   showMoveButtonsInLayoutMode: true,
   sidebarPosition: 'rightAbsolute',
-
   customOptions: [],
   uiTheme: defaultTheme,
+  shouldShowErrorInCells: false,
 };
 
 export const DEFAULT_RENDER_OPTIONS: Required<RenderOptions> = {

packages/editor/src/core/types/options.ts

@@ -136,4 +136,8 @@ export type Options = {
    * pass a custom theme to the ui (mui)
    */
   uiTheme?: Theme;
+  /**
+   * whether to show errors in cells or swallow them. It will log them to the console
+   */
+  shouldShowErrorInCells?: boolean;
 };