snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

packages/excalidraw/actions/actionExport.tsx

@@ -0,0 +1,462 @@
+import { KEYS, THEME } from "@excalidraw/common";
+
+import { CaptureUpdateAction } from "@excalidraw/element";
+
+import type { ExcalidrawElement, Theme } from "@excalidraw/element/types";
+
+import { useEditorInterface } from "../components/App";
+import { CheckboxItem } from "../components/CheckboxItem";
+import { DarkModeToggle } from "../components/DarkModeToggle";
+import { ProjectName } from "../components/ProjectName";
+import { Toast } from "../components/Toast";
+import { IconButton } from "../components/IconButton";
+import { Tooltip } from "../components/Tooltip";
+import { ExportIcon, questionCircle, saveAs } from "../components/icons";
+import { loadFromJSON, saveAsJSON } from "../data";
+import { isImageFileHandle } from "../data/blob";
+import { nativeFileSystemSupported } from "../data/filesystem";
+
+import { resaveAsImageWithScene } from "../data/resave";
+
+import { t } from "../i18n";
+
+import "../components/ToolIcon.scss";
+
+import { register } from "./register";
+
+import type { JSONExportData } from "../data/json";
+
+import type {
+  AppClassProperties,
+  AppState,
+  BinaryFiles,
+  ExcalidrawProps,
+  OnExportProgress,
+} from "../types";
+
+export const actionChangeProjectName = register<AppState["name"]>({
+  name: "changeProjectName",
+  label: "labels.fileTitle",
+  trackEvent: false,
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, name: value },
+      captureUpdate: CaptureUpdateAction.EVENTUALLY,
+    };
+  },
+  PanelComponent: ({ appState, updateData, appProps, data, app }) => (
+    <ProjectName
+      label={t("labels.fileTitle")}
+      value={app.getName()}
+      onChange={(name: string) => updateData(name)}
+      ignoreFocus={data?.ignoreFocus ?? false}
+    />
+  ),
+});
+
+export const actionChangeExportScale = register<AppState["exportScale"]>({
+  name: "changeExportScale",
+  label: "imageExportDialog.scale",
+  trackEvent: { category: "export", action: "scale" },
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, exportScale: value },
+      captureUpdate: CaptureUpdateAction.EVENTUALLY,
+    };
+  },
+});
+
+export const actionChangeExportBackground = register<
+  AppState["exportBackground"]
+>({
+  name: "changeExportBackground",
+  label: "imageExportDialog.label.withBackground",
+  trackEvent: { category: "export", action: "toggleBackground" },
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, exportBackground: value },
+      captureUpdate: CaptureUpdateAction.EVENTUALLY,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <CheckboxItem
+      checked={appState.exportBackground}
+      onChange={(checked) => updateData(checked)}
+    >
+      {t("imageExportDialog.label.withBackground")}
+    </CheckboxItem>
+  ),
+});
+
+export const actionChangeExportEmbedScene = register<
+  AppState["exportEmbedScene"]
+>({
+  name: "changeExportEmbedScene",
+  label: "imageExportDialog.tooltip.embedScene",
+  trackEvent: { category: "export", action: "embedScene" },
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, exportEmbedScene: value },
+      captureUpdate: CaptureUpdateAction.EVENTUALLY,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <CheckboxItem
+      checked={appState.exportEmbedScene}
+      onChange={(checked) => updateData(checked)}
+    >
+      {t("imageExportDialog.label.embedScene")}
+      <Tooltip label={t("imageExportDialog.tooltip.embedScene")} long={true}>
+        <div className="excalidraw-tooltip-icon">{questionCircle}</div>
+      </Tooltip>
+    </CheckboxItem>
+  ),
+});
+
+// ---------------------------------------------------------------------------
+// onExport interception helpers
+// ---------------------------------------------------------------------------
+
+let onExportInProgress = false;
+
+const onProgressToast = (
+  app: AppClassProperties,
+  progress: {
+    message?: OnExportProgress["message"];
+    progress?: number | null;
+  },
+) => {
+  const message = progress.message ?? t("progressDialog.defaultMessage");
+  app.setAppState({
+    toast: {
+      message:
+        progress.progress != null ? (
+          <>
+            {message}
+            <Toast.ProgressBar progress={progress.progress} />
+          </>
+        ) : (
+          message
+        ),
+      duration: Infinity,
+    },
+  });
+};
+
+/** awaits host app's onExport result, and renders progress to the UI */
+async function handleOnExportResult(
+  onExportResult: ReturnType<NonNullable<ExcalidrawProps["onExport"]>>,
+  opts: {
+    signal: AbortSignal;
+    app: AppClassProperties;
+  },
+): Promise<void> {
+  if (opts.app.state.isLoading) {
+    onProgressToast(opts.app, { progress: null });
+    await opts.app.onStateChange({ predicate: (state) => !state.isLoading });
+  }
+
+  if (
+    onExportResult != null &&
+    typeof onExportResult === "object" &&
+    Symbol.asyncIterator in onExportResult
+  ) {
+    for await (const value of onExportResult) {
+      if (opts.signal.aborted) {
+        onExportResult.return();
+        return;
+      }
+      if (value.type === "progress") {
+        onProgressToast(opts.app, {
+          message: value.message,
+          progress: value.progress ?? null,
+        });
+      } else if (value.type === "done") {
+        return;
+      }
+    }
+
+    // Generator completed without explicit "done" message
+    return;
+  }
+
+  if (onExportResult instanceof Promise) {
+    onProgressToast(opts.app, { progress: null });
+    await onExportResult;
+  }
+}
+
+function prepareDataForJSONExport(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  files: BinaryFiles,
+  app: AppClassProperties,
+): { abortController: AbortController; data: Promise<JSONExportData> } {
+  const abortController = new AbortController();
+  const signal = abortController.signal;
+
+  const dataPromise = new Promise<JSONExportData>(async (resolve) => {
+    try {
+      if (app.props.onExport) {
+        await handleOnExportResult(
+          app.props.onExport(
+            "json",
+            {
+              elements,
+              appState,
+              files,
+            },
+            {
+              signal,
+            },
+          ),
+          {
+            app,
+            signal,
+          },
+        );
+      }
+    } catch (error: any) {
+      if (error?.name === "AbortError") {
+        // if abort error, assume it's a reaction on the signal being aborted
+        console.warn(
+          `onExport() aborted by host app (signal aborted: ${signal.aborted})`,
+        );
+      } else {
+        // non-abort error
+        //
+        console.error("Error during props.onExport() handling", error);
+      }
+
+      // either way, we currently don't allow host apps to cancel save actions
+      // so we resolve to orig data
+    }
+
+    resolve({
+      elements,
+      appState,
+      // return latest files in case they finished loading during onExport
+      files: app.files,
+    });
+  });
+
+  return {
+    abortController,
+    data: dataPromise,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Save actions
+// ---------------------------------------------------------------------------
+
+export const actionSaveToActiveFile = register({
+  name: "saveToActiveFile",
+  label: "buttons.save",
+  icon: ExportIcon,
+  trackEvent: { category: "export" },
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.saveToActiveFile &&
+      !!appState.fileHandle &&
+      !appState.viewModeEnabled
+    );
+  },
+  perform: async (elements, appState, value, app) => {
+    if (onExportInProgress) {
+      return false;
+    }
+    onExportInProgress = true;
+
+    const previousFileHandle = appState.fileHandle;
+    const filename = app.getName();
+
+    const { abortController, data: exportedDataPromise } =
+      prepareDataForJSONExport(elements, appState, app.files, app);
+
+    try {
+      const { fileHandle } = isImageFileHandle(previousFileHandle)
+        ? await resaveAsImageWithScene(
+            exportedDataPromise,
+            previousFileHandle,
+            filename,
+          )
+        : await saveAsJSON({
+            data: exportedDataPromise,
+            filename,
+            fileHandle: previousFileHandle,
+          });
+
+      return {
+        captureUpdate: CaptureUpdateAction.NEVER,
+        appState: {
+          fileHandle,
+          toast: {
+            message:
+              previousFileHandle && fileHandle?.name
+                ? t("toast.fileSavedToFilename").replace(
+                    "{filename}",
+                    `"${fileHandle.name}"`,
+                  )
+                : t("toast.fileSaved"),
+            duration: 1500,
+          },
+        },
+      };
+    } catch (error: any) {
+      abortController.abort();
+
+      if (error?.name !== "AbortError") {
+        console.error(error);
+      } else {
+        console.warn(error);
+      }
+      return {
+        captureUpdate: CaptureUpdateAction.NEVER,
+        appState: {
+          toast: null,
+        },
+      };
+    } finally {
+      onExportInProgress = false;
+    }
+  },
+  keyTest: (event) =>
+    event.key === KEYS.S && event[KEYS.CTRL_OR_CMD] && !event.shiftKey,
+});
+
+export const actionSaveFileToDisk = register({
+  name: "saveFileToDisk",
+  label: "exportDialog.disk_title",
+  icon: ExportIcon,
+  viewMode: true,
+  trackEvent: { category: "export" },
+  perform: async (elements, appState, value, app) => {
+    if (onExportInProgress) {
+      return false;
+    }
+    onExportInProgress = true;
+
+    const { abortController, data: exportedDataPromise } =
+      prepareDataForJSONExport(elements, appState, app.files, app);
+
+    try {
+      const { fileHandle: savedFileHandle } = await saveAsJSON({
+        data: exportedDataPromise,
+        filename: app.getName(),
+        fileHandle: null,
+      });
+
+      return {
+        captureUpdate: CaptureUpdateAction.NEVER,
+        appState: {
+          openDialog: null,
+          fileHandle: savedFileHandle,
+          toast: { message: t("toast.fileSaved"), duration: 3000 },
+        },
+      };
+    } catch (error: any) {
+      abortController.abort();
+      if (error?.name !== "AbortError") {
+        console.error(error);
+      } else {
+        console.warn(error);
+      }
+      return {
+        captureUpdate: CaptureUpdateAction.NEVER,
+        appState: {
+          toast: null,
+        },
+      };
+    } finally {
+      onExportInProgress = false;
+    }
+  },
+  keyTest: (event) =>
+    event.key.toLowerCase() === KEYS.S &&
+    event.shiftKey &&
+    event[KEYS.CTRL_OR_CMD],
+  PanelComponent: ({ updateData }) => (
+    <IconButton
+      type="button"
+      icon={saveAs}
+      title={t("buttons.saveAs")}
+      aria-label={t("buttons.saveAs")}
+      showAriaLabel={useEditorInterface().formFactor === "phone"}
+      hidden={!nativeFileSystemSupported}
+      onClick={() => updateData(null)}
+      data-testid="save-as-button"
+    />
+  ),
+});
+
+export const actionLoadScene = register({
+  name: "loadScene",
+  label: "buttons.load",
+  trackEvent: { category: "export" },
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.loadScene && !appState.viewModeEnabled
+    );
+  },
+  perform: async (elements, appState, _, app) => {
+    try {
+      const {
+        elements: loadedElements,
+        appState: loadedAppState,
+        files,
+      } = await loadFromJSON(appState, elements);
+      return {
+        elements: loadedElements,
+        appState: loadedAppState,
+        files,
+        captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+      };
+    } catch (error: any) {
+      if (error?.name === "AbortError") {
+        console.warn(error);
+        return false;
+      }
+      return {
+        elements,
+        appState: { ...appState, errorMessage: error.message },
+        files: app.files,
+        captureUpdate: CaptureUpdateAction.EVENTUALLY,
+      };
+    }
+  },
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
+});
+
+export const actionExportWithDarkMode = register<
+  AppState["exportWithDarkMode"]
+>({
+  name: "exportWithDarkMode",
+  label: "imageExportDialog.label.darkMode",
+  trackEvent: { category: "export", action: "toggleTheme" },
+  perform: (_elements, appState, value, app) => {
+    app.sessionExportThemeOverride = value ? THEME.DARK : THEME.LIGHT;
+    return {
+      appState: { ...appState, exportWithDarkMode: value },
+      captureUpdate: CaptureUpdateAction.EVENTUALLY,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        marginTop: "-45px",
+        marginBottom: "10px",
+      }}
+    >
+      <DarkModeToggle
+        value={appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT}
+        onChange={(theme: Theme) => {
+          updateData(theme === THEME.DARK);
+        }}
+        title={t("imageExportDialog.label.darkMode")}
+      />
+    </div>
+  ),
+});