How to select an image in image extension?

[armannaj]

I'm building an "insert/edit image" dialog, the insert part is easy.
But for edit an image, I need to be able to click on the image, and it should be selected. However the image extension doesn't seem to have a selected state.

How can I extend it?

If you can just point me in the right direction, i'm happy to implement it myself.

thanks.

[kkshinkai]

I'm not very familiar with Remirror, but I can think of two possible approaches:

1. Since the image extension customizes the node view, you can definitely set up an onClick event on the DOM of that node. You can create your own dialog DOM nodes (like traditional ProseMirror plugins). If you decide to go this route, the prosemirror-resizable-view in Remirror might be inspiring for you. It creates resize handler DOM elements and modifies the image size through DOM events, which is somewhat similar to your requirements.

2. You could set the selectable attribute to true in the node spec of the image (it's currently false). This way, your cursor can "enter" the image, and the selectNode and unselectNode handlers in the NodeView will assist in managing cursor entry and click events.

However, regardless of the method you choose, you might need to rewrite the ImageExtension, rather than just modifying it on top of Remirror.

---

If you prefer a more React-centric approach, you might consider trying React component node views, or custom positioners + hooks (The positioner has the capability to determine if the current cursor is inside an image and can provide accurate position information for your React dialog component). I'm not certain about the feasibility of these solutions.