update config to use displayData

src/constants.ts

@@ -156,7 +156,7 @@ export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required<CustomElementConfig> = {
   type: "custom",
   customType: "custom",
   transformHandles: true,
-  svg: "",
+  displayData: { content: "", type: "svg" },
   width: 40,
   height: 40,
   stackedOnTop: false,

src/packages/excalidraw/example/App.js

@@ -204,11 +204,12 @@ export default function App() {
       {
         type: "custom",
         customType: "star",
-        svg: `data:${
-          MIME_TYPES.svg
-        }, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+        displayData: {
+          type: "svg",
+          content: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
         <path d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z" />
-      </svg>`)}`,
+      </svg>`,
+        },
         width: 60,
         height: 60,
         disableContextMenu: true,
@@ -216,11 +217,13 @@ export default function App() {
       {
         type: "custom",
         customType: "comment",
-        svg: `data:${
-          MIME_TYPES.svg
-        }, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        displayData: {
+          type: "svg",
+          content: () =>
+            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
         <path d="M256 32C114.6 32 .0272 125.1 .0272 240c0 47.63 19.91 91.25 52.91 126.2c-14.88 39.5-45.87 72.88-46.37 73.25c-6.625 7-8.375 17.25-4.625 26C5.818 474.2 14.38 480 24 480c61.5 0 109.1-25.75 139.1-46.25C191.1 442.8 223.3 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32zM256.1 400c-26.75 0-53.12-4.125-78.38-12.12l-22.75-7.125l-19.5 13.75c-14.25 10.12-33.88 21.38-57.5 29c7.375-12.12 14.37-25.75 19.88-40.25l10.62-28l-20.62-21.87C69.82 314.1 48.07 282.2 48.07 240c0-88.25 93.25-160 208-160s208 71.75 208 160S370.8 400 256.1 400z" />
-      </svg>`)}`,
+      </svg>`,
+        },
         transformHandles: false,
         stackedOnTop: true,
         onCreate,
@@ -229,24 +232,27 @@ export default function App() {
       {
         type: "custom",
         customType: "thumbsup",
-        svg: () => {
-          return new Promise((resolve, reject) => {
-            const image = document.createElement("img");
-            image.crossOrigin = "Anonymous";
-            image.src =
-              "https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg";
+        displayData: {
+          type: "dataURL",
+          content: () => {
+            return new Promise((resolve, reject) => {
+              const image = document.createElement("img");
+              image.crossOrigin = "Anonymous";
+              image.src =
+                "https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg";
 
-            image.onload = function () {
-              const canvas = document.createElement("canvas");
-              canvas.width = 30 * window.devicePixelRatio;
-              canvas.height = 30 * window.devicePixelRatio;
-              const context = canvas.getContext("2d");
-              context.scale(window.devicePixelRatio, window.devicePixelRatio);
-              context.drawImage(image, 5, 5, 20, 20);
-              resolve(canvas.toDataURL());
-            };
-            image.onerror = (err) => reject(err);
-          });
+              image.onload = function () {
+                const canvas = document.createElement("canvas");
+                canvas.width = 30 * window.devicePixelRatio;
+                canvas.height = 30 * window.devicePixelRatio;
+                const context = canvas.getContext("2d");
+                context.scale(window.devicePixelRatio, window.devicePixelRatio);
+                context.drawImage(image, 5, 5, 20, 20);
+                resolve(canvas.toDataURL());
+              };
+              image.onerror = (err) => reject(err);
+            });
+          },
         },
       },
     ];

src/renderer/renderElement.ts

@@ -269,36 +269,34 @@ const drawElementOnCanvas = (
       if (!config) {
         break;
       }
-      if (typeof config.svg === "string") {
+      const cacheImage = (data: string, type: "svg" | "dataURL") => {
         if (!customElementImgCache[element.id]) {
+          let url: string;
+          if (type === "svg") {
+            url = `data:${MIME_TYPES.svg}, ${encodeURIComponent(data)}`;
+          } else {
+            url = data;
+          }
           const img = document.createElement("img");
-          img.src = config.svg;
+          img.src = url;
           img.id = element.id;
-          customElementImgCache[img.id] = img;
+          customElementImgCache[element.id] = img;
         }
-      } else if (typeof config.svg === "function") {
-        const svg = config.svg(element);
-        if (svg instanceof Promise) {
-          svg.then((res) => {
-            if (!customElementImgCache[element.id]) {
-              const img = document.createElement("img");
-              img.id = element.id;
-              img.src = res;
-              customElementImgCache[img.id] = img;
-              context.drawImage(
-                customElementImgCache[element.id],
-                0,
-                0,
-                element.width,
-                element.height,
-              );
-            }
-          });
-        } else if (!customElementImgCache[element.id]) {
-          const img = document.createElement("img");
-          img.id = element.id;
-          img.src = svg;
-          customElementImgCache[img.id] = img;
+      };
+      const { type, content } = config.displayData;
+      if (typeof content === "string") {
+        cacheImage(content, type);
+      } else {
+        const contentData = content(element);
+        if (contentData instanceof Promise) {
+          contentData.then(
+            (res) => {
+              cacheImage(res, type);
+            },
+            (err) => console.error(err),
+          );
+        } else {
+          cacheImage(contentData, type);
         }
       }
       if (customElementImgCache[element.id]) {

src/types.ts

@@ -228,7 +228,12 @@ export type CustomElementConfig = {
   type: "custom";
   customType: string;
   transformHandles?: boolean;
-  svg: string | ((element?: ExcalidrawElement) => string | Promise<string>);
+  displayData: {
+    type: "svg" | "dataURL";
+    content:
+      | string
+      | ((element?: ExcalidrawElement) => string | Promise<string>);
+  };
   width?: number;
   height?: number;
   stackedOnTop: boolean;