1 files changed, 40 insertions, 0 deletions
diff --git a/packages/excalidraw/components/ErrorDialog.tsx b/packages/excalidraw/components/ErrorDialog.tsx
new file mode 100644
index 0000000..74d265f
--- /dev/null
+++ b/packages/excalidraw/components/ErrorDialog.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { t } from "../i18n";
+
+import { Dialog } from "./Dialog";
+import { useExcalidrawContainer } from "./App";
+
+export const ErrorDialog = ({
+  children,
+  onClose,
+}: {
+  children?: React.ReactNode;
+  onClose?: () => void;
+}) => {
+  const [modalIsShown, setModalIsShown] = useState(!!children);
+  const { container: excalidrawContainer } = useExcalidrawContainer();
+
+  const handleClose = React.useCallback(() => {
+    setModalIsShown(false);
+
+    if (onClose) {
+      onClose();
+    }
+    // TODO: Fix the A11y issues so this is never needed since we should always focus on last active element
+    excalidrawContainer?.focus();
+  }, [onClose, excalidrawContainer]);
+
+  return (
+    <>
+      {modalIsShown && (
+        <Dialog
+          size="small"
+          onCloseRequest={handleClose}
+          title={t("errorDialog.title")}
+        >
+          <div style={{ whiteSpace: "pre-wrap" }}>{children}</div>
+        </Dialog>
+      )}
+    </>
+  );
+};