fix: abstract and fix legacy fs (#4032)

src/components/App.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
 import clsx from "clsx";
-import { supported as fsSupported } from "browser-fs-access";
 import { nanoid } from "nanoid";
 
 import {
@@ -195,6 +194,7 @@ import LayerUI from "./LayerUI";
 import { Stats } from "./Stats";
 import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
+import { nativeFileSystemSupported } from "../data/filesystem";
 
 const IsMobileContext = React.createContext(false);
 export const useIsMobile = () => useContext(IsMobileContext);
@@ -3833,7 +3833,7 @@ class App extends React.Component<AppProps, AppState> {
     try {
       const file = event.dataTransfer.files[0];
       if (file?.type === "image/png" || file?.type === "image/svg+xml") {
-        if (fsSupported) {
+        if (nativeFileSystemSupported) {
           try {
             // This will only work as of Chrome 86,
             // but can be safely ignored on older releases.
@@ -3893,7 +3893,7 @@ class App extends React.Component<AppProps, AppState> {
       // default: assume an Excalidraw file regardless of extension/MimeType
     } else {
       this.setState({ isLoading: true });
-      if (fsSupported) {
+      if (nativeFileSystemSupported) {
         try {
           // This will only work as of Chrome 86,
           // but can be safely ignored on older releases.

src/components/ImageExportDialog.tsx

@@ -15,10 +15,10 @@ import { clipboard, exportImage } from "./icons";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import "./ExportDialog.scss";
-import { supported as fsSupported } from "browser-fs-access";
 import OpenColor from "open-color";
 import { CheckboxItem } from "./CheckboxItem";
 import { DEFAULT_EXPORT_PADDING } from "../constants";
+import { nativeFileSystemSupported } from "../data/filesystem";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -182,7 +182,8 @@ const ImageExportModal = ({
           margin: ".6em 0",
         }}
       >
-        {!fsSupported && actionManager.renderAction("changeProjectName")}
+        {!nativeFileSystemSupported &&
+          actionManager.renderAction("changeProjectName")}
       </div>
       <Stack.Row gap={2} justifyContent="center" style={{ margin: "2em 0" }}>
         <ExportButton

src/components/JSONExportDialog.tsx

@@ -11,7 +11,7 @@ import { actionSaveFileToDisk } from "../actions/actionExport";
 import { Card } from "./Card";
 
 import "./ExportDialog.scss";
-import { supported as fsSupported } from "browser-fs-access";
+import { nativeFileSystemSupported } from "../data/filesystem";
 
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -42,7 +42,8 @@ const JSONExportModal = ({
             <h2>{t("exportDialog.disk_title")}</h2>
             <div className="Card-details">
               {t("exportDialog.disk_details")}
-              {!fsSupported && actionManager.renderAction("changeProjectName")}
+              {!nativeFileSystemSupported &&
+                actionManager.renderAction("changeProjectName")}
             </div>
             <ToolButton
               className="Card-button"