Add onCreate in customElementConfig

src/components/App.tsx

@@ -452,6 +452,16 @@ class App extends React.Component<AppProps, AppState> {
       width,
       height,
     });
+
+    this.scene.addCallback(() => {
+      const customElementConfig = getCustomElementConfig(
+        this.props.customElementsConfig,
+        customElement.customType,
+      );
+      if (customElementConfig && customElementConfig.onCreate) {
+        customElementConfig.onCreate(customElement);
+      }
+    });
     this.scene.replaceAllElements([
       ...this.scene.getElementsIncludingDeleted(),
       customElement,

src/constants.ts

@@ -160,6 +160,7 @@ export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required<CustomElementConfig> = {
   width: 40,
   height: 40,
   stackedOnTop: false,
+  onCreate: () => {},
 };
 export const MQ_MAX_WIDTH_PORTRAIT = 730;
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;

src/packages/excalidraw/example/App.js

@@ -194,6 +194,10 @@ export default function App() {
     );
   };
 
+  const onCreate = (element) => {
+    setTimeout(() => addTextArea(element), 0);
+  };
+
   const getCustomElementsConfig = () => {
     return [
       {
@@ -217,6 +221,7 @@ export default function App() {
       </svg>`)}`,
         transformHandles: false,
         stackedOnTop: true,
+        onCreate,
       },
       {
         type: "custom",
@@ -244,8 +249,7 @@ export default function App() {
     ];
   };
 
-  const onElementClick = (element) => {
+  const addTextArea = (element) => {
-    if (element.type === "custom" && element.customType === "comment") {
     const { x: viewPortX, y: viewPortY } = sceneCoordsToViewportCoords(
       {
         sceneX: element.x,
@@ -267,13 +271,17 @@ export default function App() {
       fontSize: "13px",
     });
     textarea.placeholder = "Start typing your comments";
+
     textarea.onblur = () => {
       textarea.remove();
     };
-      excalidrawWrapperRef.current
+    excalidrawWrapperRef.current.querySelector(".excalidraw").append(textarea);
-        .querySelector(".excalidraw")
-        .append(textarea);
     textarea.focus();
+  };
+
+  const onElementClick = (element) => {
+    if (element.type === "custom" && element.customType === "comment") {
+      addTextArea(element);
     }
   };
   return (

src/types.ts

@@ -232,6 +232,7 @@ export type CustomElementConfig = {
   width?: number;
   height?: number;
   stackedOnTop: boolean;
+  onCreate?: (element: ExcalidrawElement) => void;
 };
 export interface ExcalidrawProps {
   onChange?: (