Repository: excalidraw/excalidraw
File: packages/excalidraw/components/App.tsx (TypeScript)

Code before:
  private getImageNaturalDimensions = (
    imageElement: ExcalidrawImageElement,
    imageHTML: HTMLImageElement,
  ) => {
    const minHeight = Math.max(this.state.height - 120, 160);
    // max 65% of canvas height, clamped to <300px, vh - 120px>
    const maxHeight = Math.min(
      minHeight,
      Math.floor(this.state.height * 0.5) / this.state.zoom.value,
    );

    const height = Math.min(imageHTML.naturalHeight, maxHeight);
    const width = height * (imageHTML.naturalWidth / imageHTML.naturalHeight);

    // add current imageElement width/height to account for previous centering
    // of the placeholder image
    const x = imageElement.x + imageElement.width / 2 - width / 2;
    const y = imageElement.y + imageElement.height / 2 - height / 2;

    return {
      x,
      y,
      width,
      height,
      crop: null,
    };
  };

  /** updates image cache, refreshing updated elements and/or setting status
      to error for images that fail during <img> element creation */
  private updateImageCache = async (
    elements: readonly InitializedExcalidrawImageElement[],
    files = this.files,
  ) => {
    const { updatedFiles, erroredFiles } = await _updateImageCache({
      imageCache: this.imageCache,
      fileIds: elements.map((element) => element.fileId),
      files,
    });

    if (erroredFiles.size) {
      this.scene.replaceAllElements(
        elements.map((element) => {
          if (
            isInitializedImageElement(element) &&
            erroredFiles.has(element.fileId)
          ) {
            return newElementWith(element, {
              status: "error",
            });
          }

Review comment (suggestion):
The action finalize was likely here due to the `pendingImageElementId`, which we don't have anymore.

Code after:
      const imageFile = await fileOpen({
        description: "Image",
        extensions: Object.keys(
          IMAGE_MIME_TYPES,
        ) as (keyof typeof IMAGE_MIME_TYPES)[],
      });

      await this.createImageElement({
        sceneX: x,
        sceneY: y,
        addToFrameUnderCursor: false,
        imageFile,
      });

      // avoid being batched (just in case)
      this.setState({}, () => {
        this.actionManager.executeAction(actionFinalize);
      });
    } catch (error: any) {
      if (error.name !== "AbortError") {
        console.error(error);
      } else {
        console.warn(error);
      }
      this.setState(
        {
          newElement: null,
          activeTool: updateActiveTool(this.state, { type: "selection" }),
        },
        () => {
          this.actionManager.executeAction(actionFinalize);
        },
      );
    }
  };

  private getImageNaturalDimensions = (
    imageElement: ExcalidrawImageElement,
    imageHTML: HTMLImageElement,
  ) => {
    const minHeight = Math.max(this.state.height - 120, 160);
    // max 65% of canvas height, clamped to <300px, vh - 120px>
    const maxHeight = Math.min(
      minHeight,
      Math.floor(this.state.height * 0.5) / this.state.zoom.value,
    );

    const height = Math.min(imageHTML.naturalHeight, maxHeight);
    const width = height * (imageHTML.naturalWidth / imageHTML.naturalHeight);

    // add current imageElement width/height to account for previous centering