fix api and support individual shapes and text element

src/components/App.tsx

@@ -1546,7 +1546,6 @@ class App extends React.Component<AppProps, AppState> {
       let file = event?.clipboardData?.files[0];
 
       const data = await parseClipboard(event, isPlainPaste);
-
       if (!file && data.text && !isPlainPaste) {
         const string = data.text.trim();
         if (string.startsWith("<svg") && string.endsWith("</svg>")) {

src/data/restore.ts

@@ -122,8 +122,8 @@ const restoreElementWithProperties = <
     y: extra.y ?? element.y ?? 0,
     strokeColor: element.strokeColor || oc.black,
     backgroundColor: element.backgroundColor || "transparent",
-    width: element.width || 100,
+    width: element.width,
-    height: element.height || 100,
+    height: element.height,
     seed: element.seed ?? 1,
     groupIds: element.groupIds ?? [],
     roundness: element.roundness

src/data/types.ts

@@ -38,21 +38,17 @@ export interface ImportedDataState {
   elements?:
     | readonly (
         | (ExcalidrawElement & {
-            label?: [
+            label?: { text: string } & MarkOptional<
-              { text: string } & MarkOptional<
+              ElementConstructorOpts,
-                ElementConstructorOpts,
+              "x" | "y"
-                "x" | "y"
+            >;
-              >,
-            ];
           })
         | {
             type: Exclude<ExcalidrawGenericElement["type"], "selection">;
-            label?: [
+            label?: { text: string } & MarkOptional<
-              { text: string } & MarkOptional<
+              ElementConstructorOpts,
-                ElementConstructorOpts,
+              "x" | "y"
-                "x" | "y"
+            > &
-              >,
-            ] &
               MarkOptional<ElementConstructorOpts, "x" | "y">;
           }
       )[]

src/element/newElement.ts

@@ -50,6 +50,12 @@ import { isArrowElement } from "./typeChecks";
 import { MarkOptional, Merge, Mutable } from "../utility-types";
 import { ImportedDataState } from "../data/types";
 
+const ELEMENTS_SUPPORTING_PROGRAMMATIC_API = [
+  "rectangle",
+  "ellipse",
+  "diamond",
+  "text",
+];
 export type ElementConstructorOpts = MarkOptional<
   Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
   | "width"
@@ -95,6 +101,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
     ...rest
   }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
+  console.log("width", width);
   // assign type to guard against excess properties
   const element: Merge<ExcalidrawGenericElement, { type: T["type"] }> = {
     id: rest.id || randomId(),
@@ -143,7 +150,6 @@ const getTextElementPositionOffsets = (
     height: number;
   },
 ) => {
-  console.log("metrics", metrics);
   return {
     x:
       opts.textAlign === "center"
@@ -655,25 +661,56 @@ export const convertToExcalidrawElements = (
   if (!elements) {
     return [];
   }
+  console.log(elements, "ele  ");
   elements.forEach((element) => {
     if (!element) {
       return;
     }
-    const textElement = element.label?.find((child) => child.text !== null);
     if (
       isValidTextContainer(element) &&
-      textElement &&
+      element?.label?.text &&
       (element.type === "rectangle" ||
         element.type === "ellipse" ||
         element.type === "diamond")
     ) {
-      const elements = bindTextToContainer(element, textElement);
+      const elements = bindTextToContainer(element, element.label);
       res.push(...elements);
     } else {
+      let excalidrawElement;
+      if (element.type === "text") {
+        //@ts-ignore
+        excalidrawElement = newTextElement({
+          //@ts-ignore
+          x: 0,
+          //@ts-ignore
+          y: 0,
+          ...element,
+        });
+      } else {
+        //@ts-ignore
+        excalidrawElement = newElement({
+          x: 0,
+          y: 0,
+
+          ...element,
+          width:
+            //@ts-ignore
+            element?.width ||
+            (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)
+              ? 100
+              : 0),
+          height:
+            //@ts-ignore
+            element?.height ||
+            (ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)
+              ? 100
+              : 0),
+        });
+      }
       //@ts-ignore
-      res.push(element);
+
+      res.push(excalidrawElement);
     }
   });
-
   return res;
 };

src/element/textElement.ts

@@ -1,10 +1,7 @@
 import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
-  ExcalidrawDiamondElement,
   ExcalidrawElement,
-  ExcalidrawEllipseElement,
   ExcalidrawGenericElement,
-  ExcalidrawRectangleElement,
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
   ExcalidrawTextElementWithContainer,