Merge branch 'main' of https://github.com/webzard-io/sunmao-ui into fix/windlike-patch

packages/editor/src/components/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { Application } from '@sunmao-ui/core';
 import { GridCallbacks, DIALOG_CONTAINER_ID, initSunmaoUI } from '@sunmao-ui/runtime';
 import { Box, Tabs, TabList, Tab, TabPanels, TabPanel, Flex } from '@chakra-ui/react';
@@ -35,6 +35,12 @@ export const Editor: React.FC<Props> = observer(
     const [preview, setPreview] = useState(false);
     const [codeMode, setCodeMode] = useState(false);
     const [code, setCode] = useState('');
+    const [recoverKey, setRecoverKey] = useState(0);
+    const [isError, setIsError] = useState<boolean>(false);
+
+    const onError = (err: Error | null) => {
+      setIsError(err !== null);
+    };
 
     const gridCallbacks: GridCallbacks = useMemo(() => {
       return {
@@ -83,7 +89,10 @@ export const Editor: React.FC<Props> = observer(
 
     const appComponent = useMemo(() => {
       return (
-        <ErrorBoundary>
+        <ErrorBoundary
+          key={recoverKey}
+          onError={onError}
+        >
           <App
             options={app}
             debugEvent={false}
@@ -93,7 +102,7 @@ export const Editor: React.FC<Props> = observer(
           />
         </ErrorBoundary>
       );
-    }, [App, ComponentWrapper, app, gridCallbacks]);
+    }, [App, ComponentWrapper, app, gridCallbacks, recoverKey]);
 
     const renderMain = () => {
       const appBox = (
@@ -205,6 +214,12 @@ export const Editor: React.FC<Props> = observer(
       );
     };
 
+    useEffect(() => {
+      if (isError) {
+        setRecoverKey(recoverKey + 1);
+      }
+    }, [app]);
+
     return (
       <KeyboardEventWrapper
         components={components}

packages/editor/src/components/ErrorBoundary.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 
+type Props = {
+  onError?: (error: Error | null) => void;
+}
+
 class ErrorBoundary extends React.Component<
-  Record<string, unknown>,
+  Props,
   { error: unknown }
 > {
-  constructor(props: Record<string, unknown>) {
+  constructor(props: Props) {
     super(props);
     this.state = { error: null };
   }
@@ -13,6 +17,14 @@ class ErrorBoundary extends React.Component<
     return { error };
   }
 
+  componentDidMount() {
+    this.props.onError?.(null);
+  }
+
+  componentDidCatch(error: Error) {
+    this.props.onError?.(error);
+  }
+
   render() {
     if (this.state.error) {
       return String(this.state.error);