fix: restore on paste or lib import (#3558)

src/components/App.tsx

@@ -1281,7 +1281,8 @@ class App extends React.Component<AppProps, AppState> {
     elements: readonly ExcalidrawElement[];
     position: { clientX: number; clientY: number } | "cursor" | "center";
   }) => {
-    const [minX, minY, maxX, maxY] = getCommonBounds(opts.elements);
+    const elements = restoreElements(opts.elements);
+    const [minX, minY, maxX, maxY] = getCommonBounds(elements);
 
     const elementsCenterX = distance(minX, maxX) / 2;
     const elementsCenterY = distance(minY, maxY) / 2;
@@ -1311,7 +1312,7 @@ class App extends React.Component<AppProps, AppState> {
     const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize);
 
     const oldIdToDuplicatedId = new Map();
-    const newElements = opts.elements.map((element) => {
+    const newElements = elements.map((element) => {
       const newElement = duplicateElement(
         this.state.editingGroupId,
         groupIdMap,
@@ -1328,11 +1329,7 @@ class App extends React.Component<AppProps, AppState> {
       ...this.scene.getElementsIncludingDeleted(),
       ...newElements,
     ];
-    fixBindingsAfterDuplication(
-      nextElements,
-      opts.elements,
-      oldIdToDuplicatedId,
-    );
+    fixBindingsAfterDuplication(nextElements, elements, oldIdToDuplicatedId);
 
     this.scene.replaceAllElements(nextElements);
     this.history.resumeRecording();

src/data/library.ts

@@ -2,7 +2,6 @@ import { loadLibraryFromBlob } from "./blob";
 import { LibraryItems, LibraryItem } from "../types";
 import { restoreElements } from "./restore";
 import { getNonDeletedElements } from "../element";
-import { NonDeleted, ExcalidrawElement } from "../element/types";
 import App from "../components/App";
 
 class Library {
@@ -18,6 +17,11 @@ class Library {
     this.libraryCache = [];
   };
 
+  restoreLibraryItem = (libraryItem: LibraryItem): LibraryItem | null => {
+    const elements = getNonDeletedElements(restoreElements(libraryItem));
+    return elements.length ? elements : null;
+  };
+
   /** imports library (currently merges, removing duplicates) */
   async importLibrary(blob: Blob) {
     const libraryFile = await loadLibraryFromBlob(blob);
@@ -52,12 +56,12 @@ class Library {
     const existingLibraryItems = await this.loadLibrary();
 
     const filtered = libraryFile.library!.reduce((acc, libraryItem) => {
-      const restored = getNonDeletedElements(restoreElements(libraryItem));
-      if (isUniqueitem(existingLibraryItems, restored)) {
-        acc.push(restored);
+      const restoredItem = this.restoreLibraryItem(libraryItem);
+      if (restoredItem && isUniqueitem(existingLibraryItems, restoredItem)) {
+        acc.push(restoredItem);
       }
       return acc;
-    }, [] as (readonly NonDeleted<ExcalidrawElement>[])[]);
+    }, [] as Mutable<LibraryItems>);
 
     await this.saveLibrary([...existingLibraryItems, ...filtered]);
   }
@@ -74,9 +78,13 @@ class Library {
           return resolve([]);
         }
 
-        const items = libraryItems.map(
-          (elements) => restoreElements(elements) as LibraryItem,
-        );
+        const items = libraryItems.reduce((acc, item) => {
+          const restoredItem = this.restoreLibraryItem(item);
+          if (restoredItem) {
+            acc.push(item);
+          }
+          return acc;
+        }, [] as Mutable<LibraryItems>);
 
         // clone to ensure we don't mutate the cached library elements in the app
         this.libraryCache = JSON.parse(JSON.stringify(items));