support local persistence for excalidraw library.

Co-authored-by: Drauggy <n.fomenko@safe-tech.ru>

apps/client/src/features/editor/components/excalidraw/excalidraw-utils.ts

@@ -0,0 +1,42 @@
+type LibraryItems = any;
+
+type LibraryPersistedData = {
+  libraryItems: LibraryItems;
+};
+
+export interface LibraryPersistenceAdapter {
+  load(metadata: { source: "load" | "save" }):
+    | Promise<{ libraryItems: LibraryItems } | null>
+    | {
+    libraryItems: LibraryItems;
+  }
+    | null;
+
+  save(libraryData: LibraryPersistedData): Promise<void> | void;
+}
+
+const LOCAL_STORAGE_KEY = "excalidrawLibrary";
+
+export const localStorageLibraryAdapter: LibraryPersistenceAdapter = {
+  async load() {
+    try {
+      const data = localStorage.getItem(LOCAL_STORAGE_KEY);
+      if (data) {
+        return JSON.parse(data);
+      }
+    } catch (e) {
+      console.error("Error downloading Excalidraw library from localStorage", e);
+    }
+    return null;
+  },
+  async save(libraryData) {
+    try {
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(libraryData));
+    } catch (e) {
+      console.error(
+        "Error while saving library from Excalidraw to localStorage",
+        e,
+      );
+    }
+  },
+};

apps/client/src/features/editor/components/excalidraw/excalidraw-view.tsx

@@ -22,6 +22,8 @@ import { IconEdit } from "@tabler/icons-react";
 import { lazy } from "react";
 import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
+import { useHandleLibrary } from "@excalidraw/excalidraw";
+import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
 
 const Excalidraw = lazy(() =>
   import("@excalidraw/excalidraw").then((module) => ({
@@ -36,6 +38,10 @@ export default function ExcalidrawView(props: NodeViewProps) {
 
   const [excalidrawAPI, setExcalidrawAPI] =
     useState<ExcalidrawImperativeAPI>(null);
+  useHandleLibrary({
+    excalidrawAPI,
+    adapter: localStorageLibraryAdapter,
+  });
   const [excalidrawData, setExcalidrawData] = useState<any>(null);
   const [opened, { open, close }] = useDisclosure(false);
   const computedColorScheme = useComputedColorScheme();