How to Draw an Icon Button When an Element is Created on Excalidraw

[psygo]

This post is from this question on Stack Overflow.

I'm trying to add some more interactivity to my app, which is using Excalidraw, however, I'm finding their set of event handlers to be a bit lacking, or maybe I just haven't been able to figure out how to do certain things.

An example of what I would like to achieve would be to add an icon button at the bottom right of every shape created.

At first, I thought this could be done through the onChange custom hook they provide, but the appState object doesn't seem to help that much. For example, how do I know what's the currently selected element? Of course, I could keep track of the selected elements, but it feels like drilling at this point. There's probably a better way I'm not seeing here, I hope.

Anyways, I've tried many different versions of stuff like this:

import { useRef } from "react"

import { Excalidraw } from "@excalidraw/excalidraw"
import { type ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types"

export function CustomExcalidraw() {
  const excalidrawDivRef = useRef<HTMLDivElement>(null)

  function getExcalidrawCanvas() {    
    return excalidrawDivRef.current!.querySelector("canvas.excalidraw__canvas.static")!
  }

  function onChangeEx(exEls: readonly ExcalidrawElement[]) {
    const excalidrawCanvas = getExcalidrawCanvas()
    const ctx = excalidrawCanvas.getContext("2d")!

    const lastEl = exEls[exEls.length - 1]

    if (lastEl) {
      ctx.roundRect(lastEl.x + lastEl.width, lastEl.y + lastEl.height, 180, 90, 10)
      ctx.fillStyle = "red"
      ctx.fill()
    }
  }

  return (
    <div
      ref={excalidrawDivRef}
      className="absolute top-0 w-screen h-screen"
      onPointerUp={(e) => {
        // Maybe something here could work...
      }}
    >
      <Excalidraw onChange={(exEls) => onChangeEx(exEls)} />
    </div>
  )
}

That piece of code will yield this:

It's tough to know when resizing of a shape or something else is happening, and an even bigger problem is to make changes to the <canvas> without messing up Excalidraw's own behavior.