How to directly select an image on first click? (<imgs> are in <p>)

[rezaffm]

Hi guys,

I just can get this working.

Inspired by the Link Extension, I created a custom extension for images, and my idea was to make these images "clickable" to edit them. Nothing too fancy, right. So, I copied and pasted the whole image extension and used what I saw in the link extension.I added the following addProseMirrorPlugins function to the extension:

addProseMirrorPlugins() {
    const plugins = [];
    if (this.options.openOnClick) {
        plugins.push(new prosemirrorState.Plugin({
            key: new prosemirrorState.PluginKey('handleClickLink'),
            props: {
                handleClick: (view, pos, event) => {
                    var _img;
                    const attrs = this.editor.getAttributes('image');
                    const image = (_img = event.target) === null || _img === void 0 ? void 0 : _img.closest('img');
                    if (image && attrs.href) {
													// add a modal to the body and edit the image (or use a promot to change the src)
                        return true;
                    }
                    return false;
                },
            },
        }));
    }
    return plugins;
}

That worked, except of the fact, that the image is only selected after I clicked the second time on the image. While debugging, I noticed that the first selection normally is a "TextNode" and then on the second click it's the "Node"

So, the question would be, how to directly make the image editable on first click?

I tried several prose mirrors commands, transactions et cetera, but I failed miserably.

It would be great if you could tell in the documentation more about how to select nodes. I can solv this one definitely by adding a Node View (Vue), but it should be possible to solve this just with a plugin, or am I wrong?

[BrianHung]

Clicking on an inline image that results in a NodeSelection should work out of the box (no need for addProseMirrorPlugins) given it does in prosemirror. See https://prosemirror.net/examples/upload/.

If you want to show a modal when an image is clicked, I would either use a plugin view or write a custom NodeView.

[rezaffm]

Hi! Thanks, I have an idea how to solve it with a NodeView, but I didn’t think of the plugin view option. Can you maybe show a very short example how to add this plugin view in tiptap please?

[rezaffm]

Just to clarify, the images are all in paragraphs, that’s why the selection doesn’t work.

it’s indeed easy to solve with a node view but I wonder if there is another way.

[BrianHung]

Can you maybe show a very short example how to add this plugin view in tiptap please?

The floating menu uses a plugin view so I would look at that.

the images are all in paragraphs, that’s why the selection doesn’t work

Hm, this should still work? Try uploading an image to the upload example posted above and click on it -- a Prosemirror-selectednode class is added.

[rezaffm]

Hey Brian,

I indeed fiddled around with it and realized that it is straightforward to get the attributes by using editor.getAttributes('image') and from there is easy to set up a modal. The same is true for links and of course other inline elements. So you are right, a prosemirror plugin is not needed.

What gives me a hard time with tiptap (and prosemirror) is to fully understand how to select nodes/marks - I need a bit more training I guess.

I will look at the floating menu example.

[philippkuehn]

Moving this to discussions.