let host call convertToExcalidrawElements when using programmatic API

src/components/App.tsx

@@ -304,7 +304,6 @@ import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
-import { convertToExcalidrawElements } from "../data/transform";
 import { activeEyeDropperAtom } from "./EyeDropper";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
@@ -2097,9 +2096,7 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (sceneData.elements) {
-        this.scene.replaceAllElements(
+        this.scene.replaceAllElements(sceneData.elements);
-          convertToExcalidrawElements(sceneData.elements),
-        );
       }
 
       if (sceneData.collaborators) {

src/data/restore.ts

@@ -41,7 +41,10 @@ import {
   getDefaultLineHeight,
   measureBaseline,
 } from "../element/textElement";
-import { convertToExcalidrawElements } from "../data/transform";
+import {
+  ExcalidrawProgrammaticAPI,
+  convertToExcalidrawElements,
+} from "../data/transform";
 
 type RestoredAppState = Omit<
   AppState,
@@ -366,7 +369,7 @@ const repairBoundElement = (
 };
 
 export const restoreElements = (
-  elements: ImportedDataState["elements"],
+  elements: ExcalidrawProgrammaticAPI["elements"],
   /** NOTE doesn't serve for reconciliation */
   localElements: readonly ExcalidrawElement[] | null | undefined,
   opts?: { refreshDimensions?: boolean; repairBindings?: boolean } | undefined,

src/data/transform.test.ts

@@ -1,5 +1,7 @@
-import { convertToExcalidrawElements } from "./transform";
+import {
-import { ImportedDataState } from "./types";
+  ExcalidrawProgrammaticAPI,
+  convertToExcalidrawElements,
+} from "./transform";
 
 describe("Test Transform", () => {
   it("should transform regular shapes", () => {
@@ -54,7 +56,9 @@ describe("Test Transform", () => {
     ];
 
     expect(
-      convertToExcalidrawElements(elements as ImportedDataState["elements"]),
+      convertToExcalidrawElements(
+        elements as ExcalidrawProgrammaticAPI["elements"],
+      ),
     ).toMatchSnapshot();
   });
 
@@ -76,7 +80,9 @@ describe("Test Transform", () => {
       },
     ];
     expect(
-      convertToExcalidrawElements(elements as ImportedDataState["elements"]),
+      convertToExcalidrawElements(
+        elements as ExcalidrawProgrammaticAPI["elements"],
+      ),
     ).toMatchSnapshot();
   });
 
@@ -111,7 +117,7 @@ describe("Test Transform", () => {
       },
     ];
     const excaldrawElements = convertToExcalidrawElements(
-      elements as ImportedDataState["elements"],
+      elements as ExcalidrawProgrammaticAPI["elements"],
     );
 
     expect(excaldrawElements.length).toBe(4);
@@ -193,7 +199,7 @@ describe("Test Transform", () => {
       },
     ];
     const excaldrawElements = convertToExcalidrawElements(
-      elements as ImportedDataState["elements"],
+      elements as ExcalidrawProgrammaticAPI["elements"],
     );
 
     expect(excaldrawElements.length).toBe(12);
@@ -250,7 +256,7 @@ describe("Test Transform", () => {
       },
     ];
     const excaldrawElements = convertToExcalidrawElements(
-      elements as ImportedDataState["elements"],
+      elements as ExcalidrawProgrammaticAPI["elements"],
     );
 
     expect(excaldrawElements.length).toBe(8);
@@ -283,7 +289,7 @@ describe("Test Transform", () => {
         },
       ];
       const excaldrawElements = convertToExcalidrawElements(
-        elements as ImportedDataState["elements"],
+        elements as ExcalidrawProgrammaticAPI["elements"],
       );
 
       expect(excaldrawElements.length).toBe(4);
@@ -366,7 +372,7 @@ describe("Test Transform", () => {
       ];
 
       const excaldrawElements = convertToExcalidrawElements(
-        elements as ImportedDataState["elements"],
+        elements as ExcalidrawProgrammaticAPI["elements"],
       );
 
       expect(excaldrawElements.length).toBe(4);
@@ -482,7 +488,7 @@ describe("Test Transform", () => {
       ];
 
       const excaldrawElements = convertToExcalidrawElements(
-        elements as ImportedDataState["elements"],
+        elements as ExcalidrawProgrammaticAPI["elements"],
       );
 
       expect(excaldrawElements.length).toBe(5);
@@ -530,7 +536,7 @@ describe("Test Transform", () => {
       ];
 
       const excaldrawElements = convertToExcalidrawElements(
-        elements as ImportedDataState["elements"],
+        elements as ExcalidrawProgrammaticAPI["elements"],
       );
 
       expect(excaldrawElements.length).toBe(4);
@@ -580,7 +586,7 @@ describe("Test Transform", () => {
       ];
 
       const excaldrawElements = convertToExcalidrawElements(
-        elements as ImportedDataState["elements"],
+        elements as ExcalidrawProgrammaticAPI["elements"],
       );
 
       expect(excaldrawElements.length).toBe(4);
@@ -622,7 +628,9 @@ describe("Test Transform", () => {
       },
     ];
     expect(
-      convertToExcalidrawElements(elements as ImportedDataState["elements"]),
+      convertToExcalidrawElements(
+        elements as ExcalidrawProgrammaticAPI["elements"],
+      ),
     ).toMatchSnapshot();
   });
 });

src/data/transform.ts

@@ -24,15 +24,43 @@ import {
 import {
   ExcalidrawBindableElement,
   ExcalidrawElement,
+  ExcalidrawFreeDrawElement,
   ExcalidrawGenericElement,
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
+  ExcalidrawSelectionElement,
   ExcalidrawTextElement,
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
 import { getFontString } from "../utils";
-import { ImportedDataState, ValidContainer, ValidLinearElement } from "./types";
+import { ValidContainer, ValidLinearElement } from "./types";
 
+export interface ExcalidrawProgrammaticAPI {
+  elements?:
+    | readonly (
+        | Extract<
+            ExcalidrawElement,
+            | ExcalidrawSelectionElement
+            | ExcalidrawImageElement
+            | ExcalidrawFreeDrawElement
+          >
+        | ({
+            type: Extract<ExcalidrawLinearElement["type"], "line">;
+            x: number;
+            y: number;
+          } & Partial<ExcalidrawLinearElement>)
+        | ValidContainer
+        | ValidLinearElement
+        | ({
+            type: "text";
+            text: string;
+            x: number;
+            y: number;
+            id?: ExcalidrawTextElement["id"];
+          } & Partial<ExcalidrawTextElement>)
+      )[]
+    | null;
+}
 export const ELEMENTS_SUPPORTING_PROGRAMMATIC_API = [
   "rectangle",
   "ellipse",
@@ -307,7 +335,7 @@ const excalidrawElements = (() => {
 })();
 
 export const convertToExcalidrawElements = (
-  elements: ImportedDataState["elements"],
+  elements: ExcalidrawProgrammaticAPI["elements"],
 ): ExcalidrawElement[] => {
   excalidrawElements.clear();
   if (!elements) {

src/data/types.ts

@@ -1,11 +1,8 @@
 import {
   ExcalidrawBindableElement,
   ExcalidrawElement,
-  ExcalidrawFreeDrawElement,
   ExcalidrawGenericElement,
-  ExcalidrawImageElement,
   ExcalidrawLinearElement,
-  ExcalidrawSelectionElement,
   ExcalidrawTextElement,
   FontFamilyValues,
   TextAlign,
@@ -137,30 +134,7 @@ export interface ImportedDataState {
   type?: string;
   version?: number;
   source?: string;
-  elements?:
+  elements?: readonly ExcalidrawElement[] | null;
-    | readonly (
-        | Extract<
-            ExcalidrawElement,
-            | ExcalidrawSelectionElement
-            | ExcalidrawImageElement
-            | ExcalidrawFreeDrawElement
-          >
-        | ({
-            type: Extract<ExcalidrawLinearElement["type"], "line">;
-            x: number;
-            y: number;
-          } & Partial<ExcalidrawLinearElement>)
-        | ValidContainer
-        | ValidLinearElement
-        | ({
-            type: "text";
-            text: string;
-            x: number;
-            y: number;
-            id?: ExcalidrawTextElement["id"];
-          } & Partial<ExcalidrawTextElement>)
-      )[]
-    | null;
   appState?: Readonly<
     Partial<
       AppState & {