change registerComment function to async

src/components/App.tsx

@@ -3698,10 +3698,10 @@ class App extends React.Component<AppProps, AppState> {
     );
   }
 
-  private handleCommentElementOnPointerDown = (
+  private handleCommentElementOnPointerDown = async (
     elementType: "comment",
     pointerDownState: PointerDownState,
-  ): void => {
+  ): Promise<void> => {
     if (!this.props.user) {
       return;
     }
@@ -3711,11 +3711,22 @@ class App extends React.Component<AppProps, AppState> {
       this.state.gridSize,
     );
 
+    const { x, y } = sceneCoordsToViewportCoords(
+      {
+        sceneX: gridX,
+        sceneY: gridY,
+      },
+      this.state,
+    );
+
+    const commentID = await this.props.registerComment(x, y);
+
     const element = newCommentElement({
       type: elementType,
       x: gridX,
       y: gridY,
       owner: this.excalOwner,
+      commentID,
     });
 
     this.scene.replaceAllElements([

src/data/restore.ts

@@ -209,6 +209,7 @@ const restoreElement = (
     case "comment":
       return restoreElementWithProperties(element, {
         owner: element.owner,
+        commentID: element.commentID,
       });
 
     // Don't use default case so as to catch a missing an element type case.

src/element/newElement.ts

@@ -124,6 +124,7 @@ export const newCommentElement = (opts: {
   x: number;
   y: number;
   owner: CommentOwner;
+  commentID: string;
 }): NonDeleted<ExcalidrawCommentElement> => {
   const height = 40;
   const width = 40;
@@ -145,6 +146,7 @@ export const newCommentElement = (opts: {
       roughness: 0,
     }),
     owner: opts.owner,
+    commentID: opts.commentID,
   };
 };
 

src/element/types.ts

@@ -179,6 +179,7 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
 export type ExcalidrawCommentElement = _ExcalidrawElementBase &
   Readonly<{
     type: "comment";
+    commentID: string;
   }> & { owner: CommentOwner };
 
 export type FileId = string & { _brand: "FileId" };

src/excalidraw-app/index.tsx

@@ -687,6 +687,10 @@ const ExcalidrawWrapper = () => {
           color: "#00ff",
           // image: "https://lh3.googleusercontent.com/a-/AOh14GhnBcE5G6gu8ZYjEanRJ4-SUNI7GLshrGuJfGoo=s96-c",
         }}
+        registerComment={async (x, y) => {
+          // on backend createComment with x,y coords
+          return "";
+        }}
       />
       {excalidrawAPI && (
         <CollabWrapper

src/types.ts

@@ -280,6 +280,7 @@ export interface ExcalidrawProps {
     }>,
   ) => void;
   user?: UserProp;
+  registerComment: (canvasX: number, canvasY: number) => Promise<string>;
 }
 
 export type UserProp = Readonly<{