Fix library import (#2360)

src/components/App.tsx

@@ -532,7 +532,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     return false;
   }
 
-  private addToLibrary = async (url: string) => {
+  private importLibraryFromUrl = async (url: string) => {
     window.history.replaceState({}, "Excalidraw", window.location.origin);
     try {
       const request = await fetch(url);
@@ -683,7 +683,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const addToLibraryUrl = searchParams.get("addLibrary");
 
     if (addToLibraryUrl) {
-      await this.addToLibrary(addToLibraryUrl);
+      await this.importLibraryFromUrl(addToLibraryUrl);
     }
   };
 

src/data/library.ts

@@ -2,6 +2,8 @@ import { loadLibraryFromBlob } from "./blob";
 import { LibraryItems, LibraryItem } from "../types";
 import { restoreElements } from "./restore";
 import { STORAGE_KEYS } from "../constants";
+import { getNonDeletedElements } from "../element";
+import { NonDeleted, ExcalidrawElement } from "../element/types";
 
 export class Library {
   private static libraryCache: LibraryItems | null = null;
@@ -43,9 +45,15 @@ export class Library {
     };
 
     const existingLibraryItems = await Library.loadLibrary();
-    const filtered = libraryFile.library!.filter((libraryItem) =>
-      isUniqueitem(existingLibraryItems, libraryItem),
-    );
+
+    const filtered = libraryFile.library!.reduce((acc, libraryItem) => {
+      const restored = getNonDeletedElements(restoreElements(libraryItem));
+      if (isUniqueitem(existingLibraryItems, restored)) {
+        acc.push(restored);
+      }
+      return acc;
+    }, [] as (readonly NonDeleted<ExcalidrawElement>[])[]);
+
     Library.saveLibrary([...existingLibraryItems, ...filtered]);
   }
 

src/types.ts

@@ -130,7 +130,7 @@ export type SocketUpdateData = SocketUpdateDataSource[keyof SocketUpdateDataSour
   _brand: "socketUpdateData";
 };
 
-export type LibraryItem = NonDeleted<ExcalidrawElement>[];
+export type LibraryItem = readonly NonDeleted<ExcalidrawElement>[];
 export type LibraryItems = readonly LibraryItem[];
 
 export interface ExcalidrawProps {