feat: update toast api to account for duration and closable (#5427)

* feat: update toast api to account for duration and closable * fix * update snaps * update docs * male toast nullable * fix snaps * remove clearToast from App.tsx and replace clearToast prop in Toast comp with onClose
2022-07-11 18:11:13 +05:30 · 2022-07-11 18:11:13 +05:30 · a7153d9d1d
commit a7153d9d1d
parent e885057a71
15 changed files with 162 additions and 120 deletions
--- a/src/actions/actionAddToLibrary.ts
+++ b/src/actions/actionAddToLibrary.ts
@ -42,7 +42,7 @@ export const actionAddToLibrary = register({
          commitToHistory: false,
          appState: {
            ...appState,
-            toastMessage: t("toast.addedToLibrary"),
+            toast: { message: t("toast.addedToLibrary") },
          },
        };
      })
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@ -107,14 +107,16 @@ export const actionCopyAsPng = register({
      return {
        appState: {
          ...appState,
-          toastMessage: t("toast.copyToClipboardAsPng", {
-            exportSelection: selectedElements.length
-              ? t("toast.selection")
-              : t("toast.canvas"),
-            exportColorScheme: appState.exportWithDarkMode
-              ? t("buttons.darkMode")
-              : t("buttons.lightMode"),
-          }),
+          toast: {
+            message: t("toast.copyToClipboardAsPng", {
+              exportSelection: selectedElements.length
+                ? t("toast.selection")
+                : t("toast.canvas"),
+              exportColorScheme: appState.exportWithDarkMode
+                ? t("buttons.darkMode")
+                : t("buttons.lightMode"),
+            }),
+          },
        },
        commitToHistory: false,
      };
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@ -144,13 +144,15 @@ export const actionSaveToActiveFile = register({
        appState: {
          ...appState,
          fileHandle,
-          toastMessage: fileHandleExists
-            ? fileHandle?.name
-              ? t("toast.fileSavedToFilename").replace(
-                  "{filename}",
-                  `"${fileHandle.name}"`,
-                )
-              : t("toast.fileSaved")
+          toast: fileHandleExists
+            ? {
+                message: fileHandle?.name
+                  ? t("toast.fileSavedToFilename").replace(
+                      "{filename}",
+                      `"${fileHandle.name}"`,
+                    )
+                  : t("toast.fileSaved"),
+              }
            : null,
        },
      };
--- a/src/actions/actionStyles.ts
+++ b/src/actions/actionStyles.ts
@ -36,7 +36,7 @@ export const actionCopyStyles = register({
    return {
      appState: {
        ...appState,
-        toastMessage: t("toast.copyStyles"),
+        toast: { message: t("toast.copyStyles") },
      },
      commitToHistory: false,
    };
--- a/src/appState.ts
+++ b/src/appState.ts
@ -81,7 +81,7 @@ export const getDefaultAppState = (): Omit<
    showStats: false,
    startBoundElement: null,
    suggestedBindings: [],
-    toastMessage: null,
+    toast: null,
    viewBackgroundColor: oc.white,
    zenModeEnabled: false,
    zoom: {
@ -173,7 +173,7 @@ const APP_STATE_STORAGE_CONF = (<
  showStats: { browser: true, export: false, server: false },
  startBoundElement: { browser: false, export: false, server: false },
  suggestedBindings: { browser: false, export: false, server: false },
-  toastMessage: { browser: false, export: false, server: false },
+  toast: { browser: false, export: false, server: false },
  viewBackgroundColor: { browser: true, export: true, server: true },
  width: { browser: false, export: false, server: false },
  zenModeEnabled: { browser: true, export: false, server: false },
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -380,7 +380,7 @@ class App extends React.Component<AppProps, AppState> {
        getAppState: () => this.state,
        getFiles: () => this.files,
        refresh: this.refresh,
-        setToastMessage: this.setToastMessage,
+        setToast: this.setToast,
        id: this.id,
        setActiveTool: this.setActiveTool,
        setCursor: this.setCursor,
@ -549,16 +549,12 @@ class App extends React.Component<AppProps, AppState> {
                onLinkOpen={this.props.onLinkOpen}
              />
            )}
-            {this.state.toastMessage !== null && (
+            {this.state.toast !== null && (
              <Toast
-                message={this.state.toastMessage}
-                clearToast={this.clearToast}
-                duration={
-                  this.state.toastMessage === t("alerts.browserZoom")
-                    ? Infinity
-                    : undefined
-                }
-                closable={this.state.toastMessage === t("alerts.browserZoom")}
+                message={this.state.toast.message}
+                onClose={() => this.setToast(null)}
+                duration={this.state.toast.duration}
+                closable={this.state.toast.closable}
              />
            )}
            <main>{this.renderCanvas()}</main>
@ -772,7 +768,7 @@ class App extends React.Component<AppProps, AppState> {
          ? { ...scene.appState.activeTool, type: "selection" }
          : scene.appState.activeTool,
      isLoading: false,
-      toastMessage: this.state.toastMessage || null,
+      toast: this.state.toast,
    };
    if (initialData?.scrollToContent) {
      scene.appState = {
@ -931,9 +927,13 @@ class App extends React.Component<AppProps, AppState> {
        (window.outerWidth - scrollBarWidth) / window.innerWidth;
      const isBrowserZoomed = widthRatio < 0.75 || widthRatio > 1.1;
      if (isBrowserZoomed) {
-        this.setToastMessage(t("alerts.browserZoom"));
+        this.setToast({
+          message: t("alerts.browserZoom"),
+          closable: true,
+          duration: Infinity,
+        });
      } else {
-        this.clearToast();
+        this.setToast(null);
      }
    }
  };
@ -1643,12 +1643,14 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

-  clearToast = () => {
-    this.setState({ toastMessage: null });
-  };
-
-  setToastMessage = (toastMessage: string) => {
-    this.setState({ toastMessage });
+  setToast = (
+    toast: {
+      message: string;
+      closable?: boolean;
+      duration?: number;
+    } | null,
+  ) => {
+    this.setState({ toast });
  };

  restoreFileFromShare = async () => {
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@ -7,13 +7,13 @@ const DEFAULT_TOAST_TIMEOUT = 5000;

 export const Toast = ({
  message,
-  clearToast,
+  onClose,
  closable = false,
  // To prevent autoclose, pass duration as Infinity
  duration = DEFAULT_TOAST_TIMEOUT,
 }: {
  message: string;
-  clearToast: () => void;
+  onClose: () => void;
  closable?: boolean;
  duration?: number;
 }) => {
@ -23,8 +23,8 @@ export const Toast = ({
    if (!shouldAutoClose) {
      return;
    }
-    timerRef.current = window.setTimeout(() => clearToast(), duration);
-  }, [clearToast, duration, shouldAutoClose]);
+    timerRef.current = window.setTimeout(() => onClose(), duration);
+  }, [onClose, duration, shouldAutoClose]);

  useEffect(() => {
    if (!shouldAutoClose) {
@ -50,7 +50,7 @@ export const Toast = ({
          icon={close}
          aria-label="close"
          type="icon"
-          onClick={clearToast}
+          onClick={onClose}
          className="close"
        />
      )}
--- a/src/excalidraw-app/CustomStats.tsx
+++ b/src/excalidraw-app/CustomStats.tsx
@ -19,7 +19,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 }, STORAGE_SIZE_TIMEOUT);

 type Props = {
-  setToastMessage: (message: string) => void;
+  setToast: (message: string) => void;
 };
 const CustomStats = (props: Props) => {
  const [storageSizes, setStorageSizes] = useState<StorageSizes>({
@ -68,7 +68,7 @@ const CustomStats = (props: Props) => {
          onClick={async () => {
            try {
              await copyTextToSystemClipboard(getVersion());
-              props.setToastMessage(t("toast.copyToClipboard"));
+              props.setToast(t("toast.copyToClipboard"));
            } catch {}
          }}
          title={t("stats.versionCopy")}
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@ -658,7 +658,7 @@ const ExcalidrawWrapper = () => {
  const renderCustomStats = () => {
    return (
      <CustomStats
-        setToastMessage={(message) => excalidrawAPI!.setToastMessage(message)}
+        setToast={(message) => excalidrawAPI!.setToast({ message })}
      />
    );
  };
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@ -11,6 +11,14 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->

+## Unreleased
+
+### Excalidraw API
+
+#### Breaking Changes
+
+- `setToastMessage` API is now renamed to `setToast` API and the function signature is also updated [#5427](https://github.com/excalidraw/excalidraw/pull/5427). You can also pass `duration` and `closable` attributes along with `message`.
+
 ## 0.12.0 (2022-07-07)

 ### Excalidraw API
--- a/src/packages/excalidraw/README.md
+++ b/src/packages/excalidraw/README.md
@ -475,7 +475,7 @@ You might want to use this when you want to load excalidraw with some initial el
 You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs:

 | API | signature | Usage |
-| --- | --- | --- |
+| --- | --- | --- | --- |
 | ready | `boolean` | This is set to true once Excalidraw is rendered |
 | readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) |
 | [updateScene](#updateScene) | <code>(scene: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L207">sceneData</a>) => void </code> | updates the scene with the sceneData |
@ -489,7 +489,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
 | scrollToContent | <code> (target?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L106">ExcalidrawElement</a> &#124; <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L106">ExcalidrawElement</a>[]) => void </code> | Scroll the nearest element out of the elements supplied to the center. Defaults to the elements on the scene. |
 | refresh | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You don't have to call this when the position is changed on page scroll or when the excalidraw container resizes (we handle that ourselves). For any other cases if the position of excalidraw is updated (example due to scroll on parent container and not page scroll) you should call this API. |
 | [importLibrary](#importlibrary) | `(url: string, token?: string) => void` | Imports library from given URL |
-| setToastMessage | `(message: string) => void` | This API can be used to show the toast with custom message. |
+| [setToast](#setToast) | `({message: string, closable?:boolean, duration?:number} | null) => void` | This API can be used to show the toast with custom message. |
 | [id](#id) | string | Unique ID for the excalidraw component. |
 | [getFiles](#getFiles) | <code>() => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64">files</a> </code> | This API can be used to get the files present in the scene. It may contain files that aren't referenced by any element, so if you're persisting the files to a storage, you should compare them against stored elements. |
 | [setActiveTool](#setActiveTool) | <code>(tool: { type: typeof <a href="https://github.com/excalidraw/excalidraw/blob/master/src/shapes.tsx#L4">SHAPES</a>[number]["value"] &#124; "eraser" } &#124; { type: "custom"; customType: string }) => void</code> | This API can be used to set the active tool |
@ -705,6 +705,28 @@ useEffect(() => {

 Try out the [Demo](#Demo) to see it in action.

+#### `setToast`
+
+This API can be used to show the toast with custom message.
+
+<pre>
+({ message: string,
+ closable?:boolean,
+ duration?:number } | null) => void
+</pre>
+
+| Attribute | type | Description |
+| --- | --- | --- |
+| message | string | The message to be shown on the toast. |
+| closable | boolean | Indicates whether to show the closable button on toast to dismiss the toast. |
+| duration | number | Determines the duration after which the toast should auto dismiss. To prevent autodimiss you can pass `Infinity`. |
+
+To dismiss an existing toast you can simple pass `null`
+
+```js
+setToast(null);
+```
+
 #### `setActiveTool`

 This API has the below signature. It sets the `tool` passed in param as the active tool.
--- a/src/tests/snapshots/contextmenu.test.tsx.snap
+++ b/src/tests/snapshots/contextmenu.test.tsx.snap
@ -77,7 +77,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -248,7 +248,9 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": "Added to library",
+  "toast": Object {
+    "message": "Added to library",
+  },
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -426,7 +428,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -765,7 +767,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -1104,7 +1106,9 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": "Copied styles.",
+  "toast": Object {
+    "message": "Copied styles.",
+  },
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -1280,7 +1284,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -1496,7 +1500,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -1775,7 +1779,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -2126,7 +2130,9 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": "Copied styles.",
+  "toast": Object {
+    "message": "Copied styles.",
+  },
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -2927,7 +2933,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -3266,7 +3272,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -3609,7 +3615,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -4030,7 +4036,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -4311,7 +4317,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -4661,7 +4667,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -4770,7 +4776,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
@ -4855,7 +4861,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 200,
--- a/src/tests/snapshots/regressionTests.test.tsx.snap
+++ b/src/tests/snapshots/regressionTests.test.tsx.snap
@ -85,7 +85,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -602,7 +602,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -1101,7 +1101,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -1964,7 +1964,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -2191,7 +2191,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -2693,7 +2693,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -2967,7 +2967,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -3148,7 +3148,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -3635,7 +3635,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -3896,7 +3896,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -4120,7 +4120,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -4384,7 +4384,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -4661,7 +4661,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -5107,7 +5107,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -5407,7 +5407,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -5730,7 +5730,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -5933,7 +5933,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -6111,7 +6111,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -6620,7 +6620,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -6962,7 +6962,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -9207,7 +9207,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -9607,7 +9607,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -9882,7 +9882,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -10121,7 +10121,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -10423,7 +10423,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -10601,7 +10601,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -10779,7 +10779,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -10957,7 +10957,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -11165,7 +11165,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -11373,7 +11373,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -11599,7 +11599,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -11807,7 +11807,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -11985,7 +11985,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -12193,7 +12193,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -12371,7 +12371,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -12549,7 +12549,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -12786,7 +12786,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -13574,7 +13574,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -13847,7 +13847,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -13954,7 +13954,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -14066,7 +14066,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -14253,7 +14253,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -14596,7 +14596,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -14825,7 +14825,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -15725,7 +15725,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -15836,7 +15836,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -16703,7 +16703,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -17149,7 +17149,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -17422,7 +17422,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -17531,7 +17531,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -18074,7 +18074,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
@ -18181,7 +18181,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "width": 1024,
--- a/src/tests/packages/snapshots/utils.test.ts.snap
+++ b/src/tests/packages/snapshots/utils.test.ts.snap
@ -70,7 +70,7 @@ Object {
  "startBoundElement": null,
  "suggestedBindings": Array [],
  "theme": "light",
-  "toastMessage": null,
+  "toast": null,
  "viewBackgroundColor": "#ffffff",
  "viewModeEnabled": false,
  "zenModeEnabled": false,
--- a/src/types.ts
+++ b/src/types.ts
@ -145,7 +145,7 @@ export type AppState = {
  previousSelectedElementIds: { [id: string]: boolean };
  shouldCacheIgnoreZoom: boolean;
  showHelpDialog: boolean;
-  toastMessage: string | null;
+  toast: { message: string; closable?: boolean; duration?: number } | null;
  zenModeEnabled: boolean;
  theme: Theme;
  gridSize: number | null;
@ -467,7 +467,7 @@ export type ExcalidrawImperativeAPI = {
  getAppState: () => InstanceType<typeof App>["state"];
  getFiles: () => InstanceType<typeof App>["files"];
  refresh: InstanceType<typeof App>["refresh"];
-  setToastMessage: InstanceType<typeof App>["setToastMessage"];
+  setToast: InstanceType<typeof App>["setToast"];
  addFiles: (data: BinaryFileData[]) => void;
  readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
  ready: true;