rename name to customType

src/components/App.tsx

@@ -421,11 +421,11 @@ class App extends React.Component<AppProps, AppState> {
 
   renderCustomElement = (
     coords: { x: number; y: number },
-    name: string = "",
+    customType: string = "",
   ) => {
     const config = getCustomElementConfig(
       this.props.customElementsConfig,
-      name,
+      customType,
     );
     if (!config) {
       return;
@@ -438,7 +438,7 @@ class App extends React.Component<AppProps, AppState> {
 
     const width = config.width || 40;
     const height = config.height || 40;
-    const customElement = newCustomElement(name, {
+    const customElement = newCustomElement(customType, {
       type: "custom",
       x: gridX - width / 2,
       y: gridY - height / 2,
@@ -3400,7 +3400,7 @@ class App extends React.Component<AppProps, AppState> {
         if (selectedElements[0].type === "custom") {
           const config = getCustomElementConfig(
             this.props.customElementsConfig,
-            selectedElements[0].name,
+            selectedElements[0].customType,
           );
           if (!config?.transformHandles) {
             return false;

src/constants.ts

@@ -154,7 +154,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
 
 export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required<CustomElementConfig> = {
   type: "custom",
-  name: "custom",
+  customType: "custom",
   transformHandles: true,
   svg: "",
   width: 40,

src/data/restore.ts

@@ -195,7 +195,7 @@ const restoreElement = (
       });
     }
     case "custom":
-      return restoreElementWithProperties(element, { name: "custom" });
+      return restoreElementWithProperties(element, { customType: "custom" });
     // generic elements
     case "ellipse":
       return restoreElementWithProperties(element, {});

src/element/newElement.ts

@@ -320,14 +320,14 @@ export const newImageElement = (
 };
 
 export const newCustomElement = (
-  name: string,
+  customType: string,
   opts: {
     type: ExcalidrawCustomElement["type"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawCustomElement> => {
   return {
     ..._newElementBase<ExcalidrawCustomElement>("custom", opts),
-    name,
+    customType,
   };
 };
 // Simplified deep clone for the purpose of cloning ExcalidrawElement only

src/element/types.ts

@@ -84,7 +84,7 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase &
   }>;
 
 export type ExcalidrawCustomElement = _ExcalidrawElementBase &
-  Readonly<{ type: "custom"; name: string }>;
+  Readonly<{ type: "custom"; customType: string }>;
 
 export type InitializedExcalidrawImageElement = MarkNonNullable<
   ExcalidrawImageElement,

src/packages/excalidraw/example/App.js

@@ -179,7 +179,7 @@ export default function App() {
     return [
       {
         type: "custom",
-        name: "star",
+        customType: "star",
         svg: `data:${
           MIME_TYPES.svg
         }, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
@@ -190,7 +190,7 @@ export default function App() {
       },
       {
         type: "custom",
-        name: "comment",
+        customType: "comment",
         svg: `data:${
           MIME_TYPES.svg
         }, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

src/renderer/renderElement.ts

@@ -197,7 +197,7 @@ const drawImagePlaceholder = (
 };
 
 const customElementImgCache: {
-  [key: ExcalidrawCustomElement["name"]]: HTMLImageElement;
+  [key: ExcalidrawCustomElement["customType"]]: HTMLImageElement;
 } = {};
 const drawElementOnCanvas = (
   element: NonDeletedExcalidrawElement,
@@ -264,19 +264,19 @@ const drawElementOnCanvas = (
     case "custom": {
       const config = getCustomElementConfig(
         renderConfig.customElementsConfig,
-        element.name,
+        element.customType,
       );
       if (!config) {
         break;
       }
-      if (!customElementImgCache[config.name]) {
+      if (!customElementImgCache[config.customType]) {
         const img = document.createElement("img");
-        img.id = config.name;
+        img.id = config.customType;
         img.src = config.svg;
         customElementImgCache[img.id] = img;
       }
       context.drawImage(
-        customElementImgCache[config.name],
+        customElementImgCache[config.customType],
         0,
         0,
         element.width,

src/renderer/renderScene.ts

@@ -315,7 +315,7 @@ export const renderScene = (
       if (element.type === "custom") {
         config = getCustomElementConfig(
           renderConfig.customElementsConfig,
-          element.name,
+          element.customType,
         )!;
       }
       if (!isCustom || (isCustom && config!.transformHandles)) {
@@ -389,7 +389,7 @@ export const renderScene = (
       if (locallySelectedElements[0].type === "custom") {
         const config = getCustomElementConfig(
           renderConfig.customElementsConfig,
-          locallySelectedElements[0].name,
+          locallySelectedElements[0].customType,
         );
         if (!config || !config.transformHandles) {
           showTransformHandles = false;

src/scene/selection.ts

@@ -19,7 +19,7 @@ export const getElementsWithinSelection = (
       getElementBounds(element);
     const isCustom = element.type === "custom";
     const allowSelection = isCustom
-      ? getCustomElementConfig(customElementConfig, element.name)
+      ? getCustomElementConfig(customElementConfig, element.customType)
           ?.transformHandles
       : true;
     return (

src/types.ts

@@ -208,7 +208,7 @@ export type ExcalidrawAPIRefValue =
 
 export type CustomElementConfig = {
   type: "custom";
-  name: string;
+  customType: string;
   transformHandles?: boolean;
   svg: string;
   width?: number;

src/utils.ts

@@ -615,10 +615,10 @@ export const updateObject = <T extends Record<string, any>>(
 
 export const getCustomElementConfig = (
   customElementConfig: ExcalidrawProps["customElementsConfig"],
-  name: string,
+  customType: string,
 ) => {
   if (!customElementConfig) {
     return null;
   }
-  return customElementConfig.find((config) => config.name === name);
+  return customElementConfig.find((config) => config.customType === customType);
 };